npm

Need private packages and team management tools?Check out npm Orgs. »

pretty-checkbox-react

1.1.0 • Public • Published

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

Github Release License: MIT Downloads Build Status Coverage Status


Pretty checkbox preview

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

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

832

version

1.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability