Package Exports

pretty-checkbox-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pretty-checkbox-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Quickly integrate pretty checkbox Components (checkbox, switch, radio) with React

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 depends on react >=16.8. Make sure you have React 16.8 or above installed.

npm i pretty-checkbox pretty-checkbox-react

# or with yarn
yarn add pretty-checkbox pretty-checkbox-react

Basic Usage

PCR components are easy to use and require no additional setup. They support controlled and uncontrolled modes and pass pretty much all props down to the underlying input element.

import * as React from 'react';
import { Checkbox } from 'pretty-checkbox-react';

function App() {
    return <Checkbox>Do you agree to the terms and conditions?</Checkbox>;
}

Colors & Variants

Like pretty-checkbox, colors, variant, and shapes are supported via props:

import * as React from 'react';
import { Checkbox } from 'pretty-checkbox-react';

function App() {
    return (
        <Checkbox color="primary" shape="curve" variant="thick">
            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

For your state needs, PCR components can be controlled, too. For convenience, there are hooks provided that abstract the typical, mundane tasks or creating stateful components:

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>
    );
}

Loading CSS

PCR provides an API around pretty-checkbox which means the CSS needs to get loaded by your application. If you're using webpack, css-loader probably would be ideal since you can import it alongside your app. Not using webpack? Add it to your index.html 👍

Changelog

See the releases page.

Contributions

Shout out to Lokesh for creating the original pretty-checkbox library ⭐

License

This project is licensed under the MIT License