Skip to main content

Components

Pretty Checkbox React (PCR) is a tiny implementation of a radio, checkbox, and mobile-like switch control powered by Pretty Checkbox. PCR is minimal component library written in React which provides a flexible API around pretty checkbox, including:

  • Hooks to help manage state
  • Easy checkbox indeterminate support
  • Works with managed-state form solutions (e.g. formik)
  • Works with uncontrolled form solutions (e.g. react-hook-form)
  • and more...

The components by themselves are completely stateless and just render regular old HTML that pretty-checkbox styles ๐Ÿ’….

Components#

PCR exposes three components:

  • Checkbox
  • Radio
  • Switch

any by themselves, the components are completely stateless and just render regular old HTML.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Prop Forwarding#

Libraries should be flexible. It brings me a whole lot of joy to see that my random HTML props are passes to the component I expect. PCR passes all HTML props to the underlying input element to allow you to build wickedly awesome apps โ€“ no danger here, Will Robinson.

className merging#

PCR handles pretty checkbox className for you via the Prop API, but that doesn't mean you shouldn't be able to use your own className values; those are happily merged for you:

// out is <div class="pretty my-awesome-name">...</div><Checkbox className="my-awesome-name">Awe yis</Checkbox>

id Override#

Don't want to use the super awesome UUID generator? No biggie. Use your own ๐Ÿ‘. Here's an example using shortid instead:

import React from 'react';import shortid from 'shortid';
function App() {    const id = React.useRef('MY_PROJECT' + shortid.generate());
    return <Checkbox id={id}>Here's my ID, officer</Checkbox>;}

HTML Input Attributes#

Need to make the checkbox required? Use plain old HTML ๐Ÿ‘ฉโ€๐Ÿ’ป

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Everything Else#

Custom data-* attribute or something else? PCR has your back ๐Ÿ˜Ž

<Radio data-testid="tlr">@testing-library/react ready</Radio>

Tree Shaking & Modules#

PCR is totally modular and is side-effect free. If you're using webpack, snowpack, or another modern bundler that supports ES Modules or CJS Modules.

Transpiling from Source#

In addition to ES and CJS modules, PCR also packages the transpiled typescript source code for special application needs ๐Ÿ™‚. A typical flow might look like:

App.js
import { Checkbox, useCheckboxState } from 'pretty-checkbox-react/dist-src/index';
// use your imports

If you're using babel make sure you have the following:

  • presets
    • @babel/preset-react
  • plugins
    • @babel/plugin-proposal-optional-chaining
webpack.config.js
module.exports = {    module: {        rules: [            {                test: /\.jsx?/,                // prevent exclusion of PCR from node_modules                // to allow babel to transpile for you                exclude: /(?!node_modules\/pretty-checkbox-react\/)/,                options: {                    presets: [                        [                            '@babel/preset-env',                            { corejs: 3 }                        ],                        '@babel/preset-react'                    ],                    plugins: ['@babel/plugin-proposal-optional-chaining'],                },            },        ],    },};