Get Started
Pretty Checkbox React (PCR for short) is a small, a11y friendly implementation of Pretty Checkbox โญ with easy as pie usage ๐ฅง.
#
InstallationAwesome much? I think yes! To get PCR, first make sure react
and react-dom
16.9+ are installed:
npm i react react-dom
Then, install pretty-checkbox-react
and @djthoms/pretty-checkbox
:
npm i @djthoms/pretty-checkbox pretty-checkbox-react
#
UsagePretty Checkbox React exposes three components as named exports that are importable in your fancy development environment:
Checkbox
Radio
Switch
index.js
import React from 'react';import ReactDOM from 'react-dom';import { Checkbox, Radio, Switch } from 'pretty-checkbox-react';
import '@djthoms/pretty-checkbox';
function App() { return ( <> <Checkbox>Hey Jude</Checkbox> <Radio>Don't make it bad</Radio> <Switch>Take a sad song</Switch> </> );}
ReactDOM.render(<App />, document.getElementById('root'));
Interactive examples are awesome ๐ฅ so expect them throughout the docs!
Live Editor
Result
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
Browser UsageNothing using a modern bundler like parcel, create-react-app, webpack, or something else? Use it in the browser ๐ฅ
index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Awe yis</title>
<!-- load pretty-checkbox css --> <link rel="stylesheet" href="https://unpkg.com/@djthoms/pretty-checkbox" /> </head> <body> <div id="root"></div> <!-- load react first --> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- load pretty-checkbox-react --> <script src="https://unpkg.com/pretty-checkbox-react@3/dist-browser/index.js"></script>
<script> var App = function () { return React.createElement( PrettyCheckboxReact.Checkbox, null, "Are you sure you don't want to use a modern bundler?" ); };
ReactDOM.render(React.createElement(App), document.getElementById('root')); </script> </body></html>
#
IE SupportPCR requires no extra polyfills to support IE other than the ones required for React.