A collection of React components for toggle and other checkbox inputs. Built in TypeScript with types exported.
npm install react-fun-toggles
or
yarn add react-fun-toggles
There is one component ready for use, SmileyToggle
. Import it like so:
import { SmileyToggle } from 'react-fun-toggles';
It can be actively controlled by setting the checked
property:
class ControlledToggle extends React.PureComponent<
any,
IControlledToggleState
> {
constructor(props: {}) {
super(props);
this.state = {
checked: true,
};
}
public render() {
return (
<SmileyToggle onChange={this.onChange} checked={this.state.checked} />
);
}
private onChange = (next: boolean) => this.setState({ checked: next });
}
It can also be left uncontrolled, with changes sent through the onChange
handler:
<SmileyToggle defaultChecked={true} />
The height and colors are also customizable:
<SmileyToggle height={70} checkedColor="#27986d" uncheckedColor="#c646bd" />
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
Install node >= 6 from https://nodejs.org/en/download/ Install yarn for package management https://yarnpkg.com/en/docs/install
A step by step series of examples that tell you how to get a development env running
Clone the repository
git clone https://github.com/ppoulsen/react-fun-toggles.git
Install dependencies with yarn
yarn
Run the storybook development server! This will start it on http://localhost:9001
yarn storybook
- TypeScript - Static typing
- Node.js - JavaScript Runtime
- React - UI Components
- yarn - Dependency management
- TypeStyle - Type safe CSS in JS
- Storybook - Interactive UI development environment
- Prettier - Opinionated code formatter
- tslint - Linter for TypeScript
- SmileyToggle - Adapted from a toggle in this codepen by Ashley Watson-Nolan (Twitter, Website, GitHub, CodePen)
- Paul Poulsen - Initial work - ppoulsen
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details.