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
😄 . Not using hooks? No sweat – you still need 16.9+! PCR is compatible with classes, too!
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:
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 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.
import * as React from 'react';
import { Checkbox } from 'pretty-checkbox-react';
function App() {
return <Checkbox>Do you agree to the terms and conditions?</Checkbox>;
}
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
:
import * as React from 'react';
import { Checkbox } from 'pretty-checkbox-react';
function App() {
const ref = React.useRef(null);
React.useEffect(() => {
if (ref.current) {
// do something awesome
}
}, []);
return <Checkbox ref={ref}>Do you agree to the terms and conditions?</Checkbox>;
}
Controlled Mode
Use our awesome hooks to abstract away state logic!
import * as React from 'react';
import { Checkbox, useCheckboxState } from 'pretty-checkbox-react';
function App() {
const checkbox = useCheckboxState();
const onSubmit = React.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 (
<form onSubmit={onSubmit}>
<Checkbox name="tac" value="" {...checkbox}>
Do you agree to the terms and conditions?
</Checkbox>
</form>
);
}
Documentation
PCR has extensive docs documented here: https://pretty-checkbox-react.netlify.app/. Give it a read
and see what PCR is all about
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
Contributions
Shout out to Lokesh for creating the original
pretty-checkbox library
License
This project is licensed under the MIT License