https://github.com/codebrahma/react-simple-switch
https://github.com/codebrahma/react-simple-switch
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codebrahma/react-simple-switch
- Owner: Codebrahma
- Created: 2020-01-21T09:53:15.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T01:23:57.000Z (almost 3 years ago)
- Last Synced: 2025-02-19T12:02:07.907Z (12 months ago)
- Language: JavaScript
- Size: 2.21 MB
- Stars: 0
- Watchers: 4
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# react-simple-switch
> A customizable multi state toggle switch library for react
[](https://www.npmjs.com/package/react-simple-switch) [](https://standardjs.com)
## Install
```bash
npm i react-simple-switch
```
## Documentation
Read the full Documentation [here](https://react-simple-switch-demo.netlify.com)
## Advantages
Create highly customizable toggle switches with ease. Create toggle switches with 3 states.
## Usage
### Basic usage
```jsx
import React, { Component } from 'react';
import ToggleButton from 'react-simple-switch';
export default class App extends Component {
state = {
toggleState: null
};
handleChange = toggleState => {
this.setState({ toggleState });
};
render() {
const { toggleState } = this.state;
return (
Do you like Pizzas:{' '}
{toggleState ? 'YES' : 'NO'}
);
}
}
```
### Creating toggle button with 3 states
```jsx
import React, { Component } from "react";
import ToggleButton from "react-simple-switch";
export default class App extends Component {
state = {
toggleState: false
};
handleChange = toggleState => {
this.setState({ toggleState });
};
getGender = () => {
const { toggleState } = this.state;
const genders = ['Female', 'Male', 'Other'];
return genders[toggleState - 1];
}
render() {
return (
Choose your gender {this.getGender()}
);
}
}
```
## License
MIT © [Manoj Bhat](https://github.com/Sigkill32)