aaronshaf/react-toggle
Fork: 157 Star: 949 (更新于 2024-11-23 05:14:45)
license: MIT
Language: JavaScript .
Elegant, accessible toggle component for React. Also a glorified checkbox.
最后发布版本： v2.1.1 ( 2016-10-06 06:44:23)
An elegant, accessible toggle component for React. Also a glorified checkbox.
See usage and examples.
Props
The component takes the following props.
| Prop | Type | Description |
|---|---|---|
checked |
boolean | If true, the toggle is checked. If false, the toggle is unchecked. Use this if you want to treat the toggle as a controlled component |
defaultChecked |
boolean | If true on initial render, the toggle is checked. If false on initial render, the toggle is unchecked. Use this if you want to treat the toggle as an uncontrolled component |
onChange |
function | Callback function to invoke when the user clicks on the toggle. The function signature should be the following: function(e) { }. To get the current checked status from the event, use e.target.checked. |
onFocus |
function | Callback function to invoke when field has focus. The function signature should be the following: function(e) { } |
onBlur |
function | Callback function to invoke when field loses focus. The function signature should be the following: function(e) { } |
name |
string | The value of the name attribute of the wrapped <input> element |
value |
string | The value of the value attribute of the wrapped <input> element |
id |
string | The value of the id attribute of the wrapped <input> element |
icons |
object | If false, no icons are displayed. You may also pass custom icon components in icons={{checked: <CheckedIcon />, unchecked: <UncheckedIcon />}} |
aria-labelledby |
string | The value of the aria-labelledby attribute of the wrapped <input> element |
aria-label |
string | The value of the aria-label attribute of the wrapped <input> element |
disabled |
boolean | If true, the toggle is disabled. If false, the toggle is enabled |
Installation
npm install react-toggle
Usage
If you want the default styling, include the component's CSS with
import "react-toggle/style.css" // for ES6 modules
// or
require("react-toggle/style.css") // for CommonJS
Development
npm install
npm run dev
Build
npm run build
License
MIT
最近版本更新:(数据更新于 2024-09-05 13:40:21)
2016-10-06 06:44:23 v2.1.1
主题(topics):
react, toggle
aaronshaf/react-toggle同语言 JavaScript最近更新仓库
2024-11-22 22:33:12 ZeroRing233/Degrees-of-Lewdity-RobinMod
2024-11-22 16:46:00 meshery/meshery
2024-11-21 23:03:24 bia-pain-bache/BPB-Worker-Panel
2024-11-21 22:46:48 MHSanaei/3x-ui
2024-11-21 07:00:59 nodejs/node
2024-11-21 00:49:46 FortAwesome/Font-Awesome