pretty-checkbox-react

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

Demos and Docs

Checkout the awesome doc website with sweet code examples that will update in real time after you make changes!

IDC, just show me the Props

Just want to see the props? As you wish.

Code Sandbox

Fancy something else? Want a standalone example? Looking for customize the pretty-checkbox theme? How about forking and testing your own changes in code sandbox? It will allow you to prototype and make complex examples all within your browser.

Edit pretty-checkbox-react

Browser

Include the script file and all dependencies.

Note: keep reading for examples using webpack/rollup/or some other modern web bundler.

<script type="text/javascript" src="node_modules/react/umd/react.production.min.js"></script>
<script type="text/javascript" src="node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script type="text/javascript" src="node_modules/pretty-checkbox-react/dist/pretty-checkbox-react.min.js"></script>

<script type="text/javascript">
function App() {
    return React.createElement(
        PrettyCheckboxReact.Checkbox,
        {
            animation: 'smooth',
            shape: 'curve'
        },
        React.createElement(
            'label',
            null,
            'Check me!'
        )
    )
}

ReactDOM.render(App, document.querySelector('body'));
</script>

Webpack + Rollup

If you're using webpack or rollup then with JSX you can write this more succulently:

import React from 'react';
import ReactDOM from 'react-dom';

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

function App() {
    return <Checkbox animation="smooth" shape="curve">Check me!</Checkbox>;
}

ReactDOM.render(App, document.querySelector('body'));

Getting Started

Install pretty-checkbox and pretty-checkbox-react through NPM or yarn:

yarn pretty-checkbox pretty-checkbox-react # or
npm i pretty-checkbox pretty-checkbox-react --save

pretty-checkbox is a peer dependency so you need to install it yourself or reference the CSS manually!

Make the dependencies available and begin using! pretty-checkbox-react exposes three components for your use:

  • Checkbox
  • Radio
  • Switch

GitHub