Home | Pretty Checkbox React

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

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.

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

Contributions

Shout out to Lokesh for creating the original pretty-checkbox library :star:

License

This project is licensed under the MIT License