{"library":"react-switch","title":"React Switch Component","description":"react-switch is a lightweight, customizable, and accessible toggle-switch component for React applications. Currently at version 7.1.0, it provides a draggable switch with sensible default styling that uses inline styles, eliminating the need for separate CSS imports. Key differentiators include its small bundle size (<2.5 kB gzipped), built-in accessibility features (with guidance on proper label usage), and high customizability for visual appearance. The library is actively maintained, though a specific release cadence isn't published. It supports a wide range of React versions, from 15.3.0 up to 19.0.0, as specified in its peer dependencies, making it compatible with both older and very recent React projects.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-switch"],"cli":null},"imports":["import Switch from 'react-switch';","import type { SwitchProps } from 'react-switch';","const Switch = require('react-switch');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component } from \"react\";\nimport Switch from \"react-switch\";\n\nclass SwitchExample extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { checked: false };\n    this.handleChange = this.handleChange.bind(this);\n  }\n\n  handleChange(checked) {\n    this.setState({ checked });\n  }\n\n  render() {\n    return (\n      <label htmlFor=\"my-switch\">\n        <span>Toggle Feature</span>\n        <Switch\n          id=\"my-switch\"\n          onChange={this.handleChange}\n          checked={this.state.checked}\n          offColor=\"#ccc\"\n          onColor=\"#88b\"\n          height={24}\n          width={48}\n          handleDiameter={20}\n          aria-label=\"Toggle feature on or off\"\n        />\n      </label>\n    );\n  }\n}\n\nexport default SwitchExample;\n","lang":"javascript","description":"Demonstrates a basic controlled `Switch` component within a `label` for accessibility, handling state changes and customizable appearance.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}