ReactJS 常青开关组件

ReactJS 常青开关组件是一个高度可定制的开关组件，可用于在ReactJS项目中实现打开/关闭功能。该组件具有多种自定义选项以适应不同的需求。

特点

• 易于使用：只需导入该组件并在您的组件中使用即可。
• 可高度定制：该组件的多个选项使其可适应各种需求。
• 轻量级：该组件具有小的文件大小，对项目占用的资源非常少。

安装

您可以通过npm或yarn安装ReactJS常青开关组件:

npm install --save reactjs-evergreen-switch

或

yarn add reactjs-evergreen-switch

用法

import React, { useState } from 'react';
import Switch from 'reactjs-evergreen-switch';

const MyComponent = () => {
  const [toggle, setToggle] = useState(false);

  const handleToggle = () => {
    setToggle(!toggle);
  }

  return (
    <div>
      <Switch 
        toggle={toggle}
        handleToggle={handleToggle}
      />
    </div>
  );
};

export default MyComponent;

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | toggle | bool | false | 当前开关的状态（开/关）| | handleToggle | func | () => void | 点击开关时调用的处理程序。当参数toggle变化时，应该使用此处理程序来更新开关的状态。| | disabled | bool | false | 是否禁用开关。 | | onColor | string | '#4BD763' | 开关设置为“打开”时的颜色。 | | offColor | string | '#E9EAEE' | 开关设置为“关闭”时的颜色。 | | handleColor | string | '#FFFFFF' | 开关柄的颜色。 | | uncheckedIcon | bool | null | 开关关闭时的图标。 | | checkedIcon | bool | null | 开关打开时的图标。 | | height | number | 20 | 开关的高度 | | width | number | 40 | 开关的宽度 |

示例

// 在这里添加示例组件...

结论

ReactJS常青开关组件是一个高度可定制的组件，适用于各种需求。该组件易于使用且资源占用非常少，因此它是 ReactJS 项目中使用的理想开关组件。