React Idle Timer 使用教程

React Idle Timer 使用教程

react-idle-timerUser activity timer component项目地址:https://gitcode.com/gh_mirrors/re/react-idle-timer

项目介绍

React Idle Timer 是一个用于检测用户活动状态的 React 组件。它可以帮助开发者实现用户在一段时间内无操作时的自动处理，如自动登出、显示提示信息等。该项目是开源的，托管在 GitHub 上，支持多种配置选项，适用于各种需要监控用户活动状态的应用场景。

项目快速启动

安装

首先，你需要在你的 React 项目中安装 react-idle-timer 包。你可以使用 npm 或 yarn 进行安装：

npm install react-idle-timer

或者

yarn add react-idle-timer

基本使用

以下是一个简单的示例，展示了如何在 React 应用中使用 react-idle-timer：

import React from 'react';
import IdleTimer from 'react-idle-timer';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.idleTimer = null;
    this.onIdle = this.onIdle.bind(this);
  }

  onIdle() {
    console.log('用户空闲');
  }

  render() {
    return (
      <div>
        <IdleTimer
          ref={ref => { this.idleTimer = ref; }}
          timeout={1000 * 60 * 15} // 15分钟
          onIdle={this.onIdle}
        />
        <h1>React Idle Timer 示例</h1>
      </div>
    );
  }
}

export default App;

应用案例和最佳实践

自动登出

一个常见的应用场景是当用户长时间无操作时自动登出。以下是一个实现自动登出的示例：

import React from 'react';
import IdleTimer from 'react-idle-timer';

class AutoLogout extends React.Component {
  constructor(props) {
    super(props);
    this.idleTimer = null;
    this.onIdle = this.onIdle.bind(this);
  }

  onIdle() {
    console.log('用户空闲，自动登出');
    // 执行登出操作
    this.props.logout();
  }

  render() {
    return (
      <div>
        <IdleTimer
          ref={ref => { this.idleTimer = ref; }}
          timeout={1000 * 60 * 15} // 15分钟
          onIdle={this.onIdle}
        />
        <h1>自动登出示例</h1>
      </div>
    );
  }
}

export default AutoLogout;

显示提示信息

另一个常见的应用场景是在用户即将进入空闲状态时显示提示信息，询问用户是否继续保持在线。以下是一个实现该功能的示例：

import React from 'react';
import IdleTimer from 'react-idle-timer';

class IdlePrompt extends React.Component {
  constructor(props) {
    super(props);
    this.idleTimer = null;
    this.onIdle = this.onIdle.bind(this);
    this.onActive = this.onActive.bind(this);
    this.state = {
      promptVisible: false,
    };
  }

  onIdle() {
    console.log('用户即将进入空闲状态');
    this.setState({ promptVisible: true });
  }

  onActive() {
    console.log('用户活动');
    this.setState({ promptVisible: false });
  }

  render() {
    return (
      <div>
        <IdleTimer
          ref={ref => { this.idleTimer = ref; }}
          timeout={1000 * 60 * 14} // 14分钟
          onIdle={this.onIdle}
          onActive={this.onActive}
        />
        {this.state.promptVisible && (
          <div>
            <p>您即将进入空闲状态，是否继续保持在线？</p>
            <button onClick={() => this.idleTimer.reset()}>继续在线</button>
          </div>
        )}
        <h1>空闲提示示例</h1>
      </div>
   

react-idle-timerUser activity timer component项目地址:https://gitcode.com/gh_mirrors/re/react-idle-timer