<commit_before># react-switch
[![npm](https://img.shields.io/npm/v/react-switch.svg)]()
[![npm](https://img.shields.io/npm/dm/react-switch.svg)]()

A draggable, customizable and accessible toggle-switch component for React.

<img src="https://media.giphy.com/media/l1J9OD7acbBrtYrWU/giphy.gif" />


## Demo

[Take a look at the demo.](https://yogaboll.github.io/react-switch/)

## Installation
```bash
npm install react-switch --save
```

## Usage
```javascript
import React, { Component } from 'react';
import Switch from 'react-switch';

class SwitchExample extends Component {
  constructor() {
    super();
    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(checked) {
    this.setState({ checked });
  }

  render() {
    return (
      <div>
        <label htmlFor="example-switch">Look, an example switch!</label>
        <Switch
          onChange={this.handleChange}
          checked={this.state.checked}
          id="example-switch"
        />
      </div>
    );
  }
}
```

## API

| Prop | Type | Default | Description |
| ---- |----- | ------- | ----------- |
| checked | bool | **Required** | If true, the switch is set to checked. If false, it is not checked. |
| onChange | func | **Required** | Invoked when the user clicks or drags the switch. It is passed one argument, *checked*, which is a boolean that describes the presumed future state of the checked prop. |
| disabled | bool | false | When disabled, the switch will no longer be interactive and its colors will be greyed out. |
| offColor | string | 'grey' | The switch will take on this color when it is *not* checked |
| onColor | string | 'green' | The switch will take on this color when it is checked. |
| handleColor | string | 'white' | The handle of the switch will take on this color when it is *not* active. If you use this prop, make sure to also change *activeHandleColor* to something appropriate. |
| activeHandleColor | string | '#ddd' | The handle of the switch will take on this color when it is active, meaning when it is dragged or clicked. |
| height | number | 28 | The height of the component, measured in pixels. |
| width | number | 56 | The width of the component, measured in pixels. |
| className | string | null | Set as the className of the outer shell of the switch. |
| id | string | null | Set as an attribute to the embedded checkbox. This is useful for the associated label, which can point to the id in its htmlFor attribute. |
| aria-labelledby | string | null | Set as an attribute of the embedded checkbox. This should be the same as the id of a label. |
| aria-label | string | null | Set as an attribute of the embedded checkbox. Its value will only be seen by screen readers. |

## License

MIT<commit_msg>add github stars shield to readme<commit_after># react-switch
[![npm](https://img.shields.io/npm/v/react-switch.svg)]()
[![npm](https://img.shields.io/npm/dm/react-switch.svg)]()
[![GitHub stars](https://img.shields.io/github/stars/yogaboll/react-switch.svg?style=social&label=Stars)]()

A draggable, customizable and accessible toggle-switch component for React.

<img src="https://media.giphy.com/media/l1J9OD7acbBrtYrWU/giphy.gif" />


## Demo

[Take a look at the demo.](https://yogaboll.github.io/react-switch/)

## Installation
```bash
npm install react-switch --save
```

## Usage
```javascript
import React, { Component } from 'react';
import Switch from 'react-switch';

class SwitchExample extends Component {
  constructor() {
    super();
    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(checked) {
    this.setState({ checked });
  }

  render() {
    return (
      <div>
        <label htmlFor="example-switch">Look, an example switch!</label>
        <Switch
          onChange={this.handleChange}
          checked={this.state.checked}
          id="example-switch"
        />
      </div>
    );
  }
}
```

## API

| Prop | Type | Default | Description |
| ---- |----- | ------- | ----------- |
| checked | bool | **Required** | If true, the switch is set to checked. If false, it is not checked. |
| onChange | func | **Required** | Invoked when the user clicks or drags the switch. It is passed one argument, *checked*, which is a boolean that describes the presumed future state of the checked prop. |
| disabled | bool | false | When disabled, the switch will no longer be interactive and its colors will be greyed out. |
| offColor | string | 'grey' | The switch will take on this color when it is *not* checked |
| onColor | string | 'green' | The switch will take on this color when it is checked. |
| handleColor | string | 'white' | The handle of the switch will take on this color when it is *not* active. If you use this prop, make sure to also change *activeHandleColor* to something appropriate. |
| activeHandleColor | string | '#ddd' | The handle of the switch will take on this color when it is active, meaning when it is dragged or clicked. |
| height | number | 28 | The height of the component, measured in pixels. |
| width | number | 56 | The width of the component, measured in pixels. |
| className | string | null | Set as the className of the outer shell of the switch. |
| id | string | null | Set as an attribute to the embedded checkbox. This is useful for the associated label, which can point to the id in its htmlFor attribute. |
| aria-labelledby | string | null | Set as an attribute of the embedded checkbox. This should be the same as the id of a label. |
| aria-label | string | null | Set as an attribute of the embedded checkbox. Its value will only be seen by screen readers. |

## License

MIT
{'fraction_non_alphanumeric': 0.1224991224991225, 'fraction_numerical': 0.002457002457002457, 'mean_word_length': 3.304380664652568, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 9, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2153985', 'n_tokens_mistral': 1666, 'n_tokens_neox': 1607, 'n_words': 670}