https://github.com/trendmicro-frontend/react-toggle-switch

React Toggle Switch component
https://github.com/trendmicro-frontend/react-toggle-switch

Last synced: 11 days ago
JSON representation

React Toggle Switch component

• Host: GitHub
• URL: https://github.com/trendmicro-frontend/react-toggle-switch
• Owner: trendmicro-frontend
• License: mit
• Created: 2017-01-19T10:53:06.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-09-22T13:59:18.000Z (over 1 year ago)
• Last Synced: 2024-12-22T18:02:58.958Z (20 days ago)
• Language: JavaScript
• Homepage: https://trendmicro-frontend.github.io/react-toggle-switch
• Size: 449 KB
• Stars: 10
• Watchers: 18
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - react-toggle-switch - React Toggle Switch component ([demo](https://trendmicro-frontend.github.io/react-toggle-switch/)). (Trend Micro / React Components)
• awesome_frontend_development_resources - react-toggle-switch - React Toggle Switch component ([demo](https://trendmicro-frontend.github.io/react-toggle-switch/)). (Trend Micro / React Components)
• awesome_frontend_development_resources - react-toggle-switch - React Toggle Switch component ([demo](https://trendmicro-frontend.github.io/react-toggle-switch/)). (Trend Micro / React Components)

README

        
# react-toggle-switch [![build status](https://travis-ci.org/trendmicro-frontend/react-toggle-switch.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-toggle-switch) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-toggle-switch/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-toggle-switch?branch=master)

[![NPM](https://nodei.co/npm/@trendmicro/react-toggle-switch.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-toggle-switch/)

React Toggle Switch

Demo: https://trendmicro-frontend.github.io/react-toggle-switch

## Installation

1. Install the latest version of [react](https://github.com/facebook/react) and [react-toggle-switch](https://github.com/trendmicro-frontend/react-toggle-switch):

  ```

  npm install --save react @trendmicro/react-toggle-switch

  ```

2. At this point you can import `@trendmicro/react-toggle-switch` and its styles in your application as follows:

  ```js

  import ToggleSwitch from '@trendmicro/react-toggle-switch';

  // Be sure to include styles at some point, probably during your bootstraping

  import '@trendmicro/react-toggle-switch/dist/react-toggle-switch.css';

  ```

## Usage

### Uncontrolled Component

```js

 {

        this.toggleSwitch = node;

    }}

/>

```

You can get the value of the checked attribute:

```js

console.log(this.toggleSwitch.checked);

// => true

```

### Controlled Component

```js

 {

        this.setState({ checked: !this.state.checked });

    }}

/>

```

## API

### Properties

  

    

      Name

      Type

      Default

      Description

    

  

  

    

      checked

      boolean

      false

      

    

    

      disabled

      boolean

      false

      

    

    

      onChange

      function

      

      A callback fired when toggling checked state.

    

    

      size

      One of:
'large'
'lg'
'small'
'sm'

      'lg'

      

    

  

## License

MIT