react-fun-toggles

A collection of React components for toggle and other checkbox inputs. Built in TypeScript with types exported.

Getting Started

Installation

npm install react-fun-toggles

yarn add react-fun-toggles

Usage

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" />

Getting Started (Contributing)

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.

Prerequisites

Install node >= 6 from https://nodejs.org/en/download/ Install yarn for package management https://yarnpkg.com/en/docs/install

Installing

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

Built With

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

Credit

SmileyToggle - Adapted from a toggle in this codepen by Ashley Watson-Nolan (Twitter, Website, GitHub, CodePen)

Authors

Paul Poulsen - Initial work - ppoulsen

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

ppoulsen / react-fun-toggles Goto Github PK