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 is a tiny react wrapper around the awesome 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 Example

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

import 'pretty-checkbox';

function App() {
    const [checked, setChecked] = React.useState(false);

    const handleChange = React.useCallback(() => {
        setChecked(prev => !prev);
    }, []);

    // or useReducer for shorthand...
    // const [checked, handleChange] = React.useReducer(state => !state, false);

    React.useEffect(() => {
        if (checked) {
            // perform some side effect
            // when the state changes
        }
    }, [checked]);

    return (
        <Checkbox state={checked} onChange={handleChange}>
            Yes! I want emails!
        </Checkbox>
    );
}

`useState` Hooks

For your convenience, each component has a "useState" hook to takes care of connecting all the pieces together.

import React from 'react';
import { Checkbox, useCheckboxState } from 'pretty-checkbox-react';

import 'pretty-checkbox';

function App() {
    const checkbox = useCheckboxState();

    React.useEffect(() => {
        if (checkbox.state) {
            // perform some side effect
            // when the state changes
        }
    }, [chekbox.state]);

    return <Checkbox {...checkbox}>Yes! I want emails!</Checkbox>;
}

Basic Uncontrolled Example

PCR works as an uncontrolled component too. This allows you to easily integrate with tools like react-hook-form and other uncontrolled form solutions.

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

import 'pretty-checkbox';

const ref = React.createRef();

function App() {
    // or you can add a ref in your component
    // const ref = React.useRef();

    return (
        <form
            onSubmit={e => {
                e.preventDefault();

                if (!ref.current.checked) {
                    alert('You must agree to the terms and conditions!');
                }

                // do something else...
            }}>
            <Checkbox ref={ref}>I agree to the terms and conditions</Checkbox>
        </form>
    );
}

With Class Components

React 16.8 is required for pretty checkbox react to work. If you're on the required version, then you can use class components too:

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

import 'pretty-checkbox';

class Demo extends React.Component {
    constructor(props) {
        super(props);

        this.state = { checked: false };
        this.handleChange = this._handleChange.bind(this);
    }

    _handleChange() {
        this.setState({ checked: true });
    }

    render() {
        return (
            <Checkbox state={this.state.checked} onChange={this.handleChange}>
                Yes! I want emails!
            </Checkbox>
        );
    }
}

Grouping Controls

To make working with managed form solutions easier, PCR has a generic Group component for usage with checkboxes and switches. For radio inputs, however, there is a special RadioGroup component.

import * as React from 'react';
import { Radio, useRadioState, RadioGroup } from 'pretty-checkbox-react';

import 'pretty-checkbox';

function App() {
    const radio = useRadioState();

    return (
        <RadioGroup {...radio}>
            <Radio value="yes" name="sub" {...radio}>
                Yes! I want emails
            </Radio>
            <Radio value="no" name="sub" {...radio}>
                No, I do not want emails
            </Radio>
        </RadioGroup>
    );
}

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