Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atomicpages/pretty-checkbox-react
A tiny react/preact wrapper around pretty-checkbox
https://github.com/atomicpages/pretty-checkbox-react
animation checkbox css hooks html icons preact radio-buttons react scss
Last synced: 3 months ago
JSON representation
A tiny react/preact wrapper around pretty-checkbox
- Host: GitHub
- URL: https://github.com/atomicpages/pretty-checkbox-react
- Owner: atomicpages
- License: mit
- Created: 2019-01-15T20:02:56.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-04-14T00:23:40.000Z (10 months ago)
- Last Synced: 2024-04-14T10:15:37.010Z (10 months ago)
- Topics: animation, checkbox, css, hooks, html, icons, preact, radio-buttons, react, scss
- Language: TypeScript
- Homepage: https://pretty-checkbox-react.netlify.app/
- Size: 13.9 MB
- Stars: 35
- Watchers: 4
- Forks: 7
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - pretty-checkbox-react - checkbox | atomicpages | 35 | (TypeScript)
README
A flexible, yet simple React API around Pretty Checkbox
# Pretty Checkbox React
Pretty Checkbox React (PCR for short) is a small react wrapper around the the
pretty awesome library pretty checkbox.
## Getting Started
> Pretty Checkbox React uses hooks heavily., Be sure you're running React 16.9
> or later :smile:. Not using hooks? No sweat – you still need 16.9+! PCR
> is compatible with classes, too!
```sh
npm i pretty-checkbox pretty-checkbox-react
# or with yarn
yarn add pretty-checkbox pretty-checkbox-react
```
Make sure you're on a supported version of React and React DOM:
```sh
npm i react@^16.9 react-dom@^16.9
# or use the latest and greatest react
npm i react react-dom
```
### Using Preact?
PCR seamlessly integrates with Preact :sunglasses:, you don't even need to
include `preact/compat`!
## Basic Usage
PCR components are easy to use and require no additional setup. Use as
controlled or uncontrolled, use with hooks or with classes, and pass all the
props you want -- it's all forwarded to the underlying `input` element. Hungry
for more? Head on over the the
[doc site](https://pretty-checkbox-react.netlify.app/).
```tsx
import { Checkbox } from 'pretty-checkbox-react';
function App() {
return Do you agree to the terms and conditions?;
}
```
### Uncontrolled Usage
Add a `ref` and get access to the input element. Uncontrolled mode allows for
seamless integration with form solutions like `react-hook-form`:
```tsx
import { useEffect, useRef } from 'react';
import { Checkbox } from 'pretty-checkbox-react';
function App() {
const ref = useRef(null);
useEffect(() => {
if (ref.current) {
// do something awesome
}
}, []);
return (
Do you agree to the terms and conditions?
);
}
```
### Controlled Mode
Use our awesome hooks to abstract away state logic!
```tsx
import { useCallback } from 'react';
import { Checkbox, useCheckboxState } from 'pretty-checkbox-react';
function App() {
const checkbox = useCheckboxState();
const onSubmit = useCallback(
(e) => {
e.preventDefault();
if (!checkbox.state) {
// update the state manually from the `confirm` result
checkbox.setState(confirm('Do you agree to the terms and conditions?'));
}
},
[checkbox]
);
return (
Do you agree to the terms and conditions?
);
}
```
## Documentation
PCR has extensive docs documented here:
https://pretty-checkbox-react.netlify.app/. Give it a read and see what PCR is
all about :+1:.
### Legacy Docs
For posterity purposes, PCR 1.x docs are still hosted here:
https://atomicpages.github.io/pretty-checkbox-react/home/
## Changelog
Head on over to
[releases](https://github.com/atomicpages/pretty-checkbox-react/releases) :tada:
## Contributions
Shout out to [Lokesh](https://github.com/lokesh-coder) for creating the original
[pretty-checkbox library](https://github.com/lokesh-coder/pretty-checkbox)
:star:
## License
This project is licensed under the MIT License