Pretty Checkbox React (PCR for short) is a small react wrapper around the the pretty awesome library pretty checkbox.
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
PCR seamlessly integrates with Preact π, you don't even need to
include preact/compat
!
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>;
}
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>
);
}
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>
);
}
PCR has extensive docs documented here: https://pretty-checkbox-react.netlify.app/. Give it a read and see what PCR is all about π.
For posterity purposes, PCR 1.x docs are still hosted here: https://atomicpages.github.io/pretty-checkbox-react/home/
Head on over to releases π
Shout out to Lokesh for creating the original pretty-checkbox library β
This project is licensed under the MIT License