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 { 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 { useEffect, useRef } from 'react';
import { Checkbox } from 'pretty-checkbox-react';
function App() {
const ref = useRef(null);
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 { 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 (
<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