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, useCheckboxState } from 'pretty-checkbox-react';

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 Controlled Example

Want to control things without a hook? No problem.

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

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

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:

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';

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