@krustyc/react-checkbox

React animated checkbox built with styled-components

Stats

StarsIssuesVersionUpdatedCreatedSize
@krustyc/react-checkbox
101.0.73 years ago3 years agoMinified + gzip package size for @krustyc/react-checkbox in KB

Readme

react-checkbox

React checkbox created with styled-components

Here only a small descritpion is provided, if you want to check a more accurated documentation please checkout the (Demo)

Motivation

While I was working on Muso I was looking for a nice, simple and possible animated checkbox but aftear hours of searching I couldn't find anything nice, so I decided to built it on my own.

This library provides an animated checkbox, in two different shapes(rounded, squared).

  • Currently the style can not be customised, but that it's at the top of my todo lis!*

Installation

npm save @krustyc/react-checkbox
or
yarn add @krustyc/react-checkbox

Usage

The library does not provide any behaviour on the state of the checkbox as I wanted to give back to the user the control on it. The easiest implementation would be something like the code below.

import React, { Component } from 'react'
import Checkbox from '@krustyc/react-checkbox'

export default class Form extends Component {
  state = {
    checked: false
  }
  
  onChange = () => this.setState(prevState => ({ checked: !prevState.checked })
  
  render() {
    return (
      <Checkbox id="checkbox" onChange={this.onChange} checked={this.state.checked} />
    )
  }
}

Contributing

Feel free to cnotribute if you want to improve it or solve an issue. Please always check linting (yarn lint) and test (yarn test) before pushing.

Submit a PR from a branch named fix/meaningful-name or feature/meaningful-name. Not from master. Please provide meaningful commit messages. If needed, squash commits before opening your PR.

Todos

  • Customisable style configruation (colors, sizes, etc...)
  • Add CircleCI
  • Add Tests

Credits

  • Davide Crestini

License

MIT

Copyright (©) 2018-present, Davide Crestini

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.