Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

pretty-checkbox-react

2.0.0-rc.1 • Public • Published

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

Github Release License: MIT Downloads Build Status Coverage Status


Pretty checkbox preview

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

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

Install

npm i pretty-checkbox-react

DownloadsWeekly Downloads

1,296

Version

2.0.0-rc.1

License

MIT

Unpacked Size

183 kB

Total Files

117

Last publish

Collaborators

  • avatar