https://github.com/aaronshaf/react-toggle

Elegant, accessible toggle component for React. Also a glorified checkbox.
https://github.com/aaronshaf/react-toggle

react toggle

Last synced: 10 days ago
JSON representation

Elegant, accessible toggle component for React. Also a glorified checkbox.

• Host: GitHub
• URL: https://github.com/aaronshaf/react-toggle
• Owner: aaronshaf
• License: mit
• Created: 2015-03-18T22:17:58.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-07-03T09:39:31.000Z (over 1 year ago)
• Last Synced: 2024-04-15T00:25:04.115Z (7 months ago)
• Topics: react, toggle
• Language: JavaScript
• Homepage: http://aaronshaf.github.io/react-toggle/
• Size: 3.36 MB
• Stars: 944
• Watchers: 15
• Forks: 159
• Open Issues: 69
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-hackathon - react-toggle

README

        
An elegant, accessible toggle component for React. Also a glorified checkbox.

See [usage and examples](http://aaronshaf.github.io/react-toggle/).

## 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 \ element |

| `value`           | _string_   | The value of the `value` attribute of the wrapped \ element |

| `id`              | _string_   | The value of the `id` attribute of the wrapped \ element |

| `icons`        | _object_  | If `false`, no icons are displayed. You may also pass custom icon components in `icons={{checked: , unchecked: }}` |

| `aria-labelledby` | _string_   | The value of the `aria-labelledby` attribute of the wrapped \ element |

| `aria-label`      | _string_   | The value of the `aria-label` attribute of the wrapped \ element |

| `disabled`        | _boolean_  | If `true`, the toggle is disabled. If `false`, the toggle is enabled |

## Installation

```bash

npm install react-toggle

```

## Usage

If you want the default styling, include the component's [CSS](./style.css) with

```javascript

import "react-toggle/style.css" // for ES6 modules

// or

require("react-toggle/style.css") // for CommonJS

```

## Development

```javascript

npm install

npm run dev

```

## Build

```javascript

npm run build

```

## License

MIT