https://github.com/krustyc/react-checkbox

React checkbox created with styled-components
https://github.com/krustyc/react-checkbox

animation checkbox react styled-components

Last synced: 27 days ago
JSON representation

React checkbox created with styled-components

• Host: GitHub
• URL: https://github.com/krustyc/react-checkbox
• Owner: KrustyC
• License: mit
• Created: 2018-07-11T17:41:38.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-29T12:57:35.000Z (about 6 years ago)
• Last Synced: 2024-10-18T10:55:30.895Z (29 days ago)
• Topics: animation, checkbox, react, styled-components
• Language: JavaScript
• Size: 493 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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)](https://krustyc.github.io/react-checkbox/)*

  

# Motivation

While I was working on [Muso](https://gomuso.io/) 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.

```jsx

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 (

      

    )

  }

}

```

## 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](http://opensource.org/licenses/MIT)

Copyright (©) 2018-present, Davide Crestini