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.

Public Archive

With headless component libraries like headless-ui, radix, and base the need for bespoke components is long gone. This was built at a time where the ecosystem was rapid evolving and the concept of headless components didn't really exist. I'd recommend using shadcn for any headless compnents moving forward. Thanks for the support over the years!

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 😎, 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.

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