Skip to content

Commit 9d5d6d9

Browse files
atomicpagesgitbook-bot
atomicpages
authored and
gitbook-bot
committed
GitBook: [master] 3 pages modified
1 parent 647885a commit 9d5d6d9

3 files changed

Lines changed: 216 additions & 87 deletions

File tree

‎README.md‎

Lines changed: 52 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,68 @@
1-
<h4 align="center">Quickly integrate pretty checkbox Components (checkbox, switch, radio) with React</h4>
2-
3-
<p align="center">
4-
<a href="https://github.com/atomicpages/pretty-checkbox-react/releases">
5-
<img src="https://img.shields.io/github/release/atomicpages/pretty-checkbox-react.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Github Release">
6-
</a>
7-
<a href="https://github.com/atomicpages/pretty-checkbox-react/blob/master/LICENSE">
8-
<img alt="License: MIT" src="https://img.shields.io/github/license/atomicpages/pretty-checkbox-react.svg?style=flat-square">
9-
</a>
10-
<a href="https://www.npmjs.com/package/pretty-checkbox-react" target="_blank" rel="nofollow noreferred noopener">
11-
<img src="https://img.shields.io/npm/dm/pretty-checkbox-react.svg?style=flat-square" alt="Downloads">
12-
</a>
13-
<a href="https://travis-ci.org/atomicpages/pretty-checkbox-react" target="_blank" rel="nofollow noreferred noopener">
14-
<img alt="Build Status" src="https://img.shields.io/travis/atomicpages/pretty-checkbox-react.svg?style=flat-square">
15-
</a>
16-
<a href='https://coveralls.io/github/atomicpages/pretty-checkbox-react?branch=master' target="_blank" rel="nofollow noreferred noopener">
17-
<img alt="Coverage Status" src="https://img.shields.io/coveralls/github/atomicpages/pretty-checkbox-react/master.svg?style=flat-square">
18-
</a>
19-
<a href="https://codeclimate.com/github/atomicpages/pretty-checkbox-react/maintainability" target="_blank" rel="nofollow noreferred noopener">
20-
<img src="https://api.codeclimate.com/v1/badges/e7cca7813f2905d7aca7/maintainability" />
21-
</a>
22-
</p>
23-
<br>
24-
25-
<div align="center">
26-
<img src="preview.gif" alt="Pretty checkbox preview" />
27-
</div>
28-
29-
### Demos and Docs
30-
Checkout the awesome [doc website](https://atomicpages.github.io/pretty-checkbox-react/home/) with sweet code examples that will update in real time after you make changes!
31-
32-
#### Code Sandbox
33-
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.
34-
35-
[![Edit pretty-checkbox-react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/40v46649m0)
36-
37-
### Browser
38-
Include the script file and all dependencies.
39-
40-
> Note: keep reading for examples using webpack/rollup/or some other modern web bundler.
41-
42-
```html
43-
<script type="text/javascript" src="node_modules/react/umd/react.production.min.js"></script>
44-
<script type="text/javascript" src="node_modules/react-dom/umd/react-dom.production.min.js"></script>
45-
<script type="text/javascript" src="node_modules/pretty-checkbox-react/dist/pretty-checkbox-react.min.js"></script>
1+
# Getting Started
462

47-
<script type="text/javascript">
48-
function App() {
49-
return React.createElement(
50-
PrettyCheckboxReact.Checkbox,
51-
{
52-
animation: 'smooth',
53-
shape: 'curve'
54-
},
55-
React.createElement(
56-
'label',
57-
null,
58-
'Check me!'
59-
)
60-
)
61-
}
3+
## Installing
4+
5+
Getting `pretty-checkbox-react` is easy
6+
7+
{% hint style="info" %}
8+
`pretty-checkbox` is a peer dependency of pretty-checkbox-react so you need to be sure to install this as well
9+
{% endhint %}
10+
11+
```bash
12+
npm i pretty-checkbox-react pretty-checkbox --save
13+
14+
# or with yarn
15+
yarn add pretty-checkbox-react pretty-checkbox
16+
```
17+
18+
### Usage
19+
20+
Pretty Checkbox React \(PCR\) can be used directly in the browser via UMD or inside a modern bundlers like webpack, rollup, or browserify.
6221

63-
ReactDOM.render(App, document.querySelector('body'));
22+
{% code title="index.html" %}
23+
```markup
24+
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
25+
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
26+
<script src="https://unpkg.com/pretty-checkbox-react/dist-browser/index.js"></script>
27+
28+
<script type="text/javascript">
29+
function App() {
30+
return React.createElement(
31+
PrettyCheckboxReact.Checkbox,
32+
Object.assign(
33+
{
34+
animation: "smooth",
35+
shape: "curve"
36+
},
37+
PrettyCheckboxReact.useCheckboxState()
38+
),
39+
"Yes, I want emails!"
40+
);
41+
}
42+
43+
ReactDOM.render(React.createElement(App), document.querySelector("body"));
6444
</script>
45+
6546
```
47+
{% endcode %}
6648

67-
#### Webpack + Rollup
68-
If you're using webpack or rollup then with JSX you can write this more succulently:
49+
If you're using a modern bundler then the syntax is a bit easier:
6950

51+
{% code title="index.js" %}
7052
```jsx
7153
import React from 'react';
7254
import ReactDOM from 'react-dom';
73-
74-
import { Checkbox } from 'pretty-checkbox-react';
55+
import { Checkbox, useCheckboxState } from 'pretty-checkbox-react';
7556

7657
function App() {
77-
return <Checkbox animation="smooth" shape="curve">Check me!</Checkbox>;
58+
const checkbox = useCheckboxState();
59+
60+
return <Checkbox {...checkbox}>Hello</Checkbox>
7861
}
7962

80-
ReactDOM.render(App, document.querySelector('body'));
63+
ReactDOM.render(<App />, document.getElementById('root'));
8164
```
65+
{% endcode %}
8266

83-
### Getting Started
84-
Install `pretty-checkbox` and `pretty-checkbox-react` through NPM or yarn:
85-
86-
```bash
87-
yarn pretty-checkbox pretty-checkbox-react # or
88-
npm i pretty-checkbox pretty-checkbox-react --save
89-
```
90-
91-
> `pretty-checkbox` is a _peer_ dependency so you need to install it yourself or reference the CSS manually!
92-
93-
Make the dependencies available and begin using! `pretty-checkbox-react` exposes three components for your use:
94-
95-
* Checkbox
96-
* Radio
97-
* Switch
98-
99-
### Contributions
100-
Shout out to [Lokesh](https://github.com/lokesh-coder) for creating the original [pretty-checkbox library](https://github.com/lokesh-coder/pretty-checkbox) :star:
67+
For more details about the components available, see each component for more examples and APIs.
10168

102-
### License
103-
This project is licensed under the MIT License

‎SUMMARY.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Table of contents
2+
3+
* [Getting Started](README.md)
4+
5+
## Components
6+
7+
* [Checkbox](components/checkbox.md)
8+

‎components/checkbox.md‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
# Checkbox
2+
3+
PCR's Checkbox is a simple and small accessible checkbox implementation that's flexible.
4+
5+
### Usage
6+
7+
Checkbox receives props as [controlled inputs](https://reactjs.org/docs/forms.html), such as `checked` and `onChange`. Basic controlled usage can be seen below:
8+
9+
```jsx
10+
import React from 'react'
11+
import { Checkbox } from 'pretty-checkbox-react';
12+
13+
function App() {
14+
const [checked, setChecked] = React.useState(false);
15+
const toggle = React.useCallback(() => {
16+
setChecked(prev => !prev);
17+
// some other action on change...
18+
}, []);
19+
20+
return (
21+
<Checkbox
22+
checked={checked}
23+
onChange={toggle}>
24+
Yes! I want emails!
25+
</Checkbox>
26+
)
27+
}
28+
```
29+
30+
#### `useCheckboxState`
31+
32+
To make things easier, there's also the `useCheckboxState` hook which takes care of connecting the checkbox and state together.
33+
34+
```jsx
35+
import React from 'react'
36+
import { Checkbox, useCheckboxState } from 'pretty-checkbox-react';
37+
38+
function App() {
39+
const checkbox = useCheckboxState();
40+
41+
React.useEffect(() => {
42+
// perform some action whenever state changes
43+
}, [checkbox.state]);
44+
45+
return (
46+
<Checkbox {...checkbox}>
47+
Yes! I want emails!
48+
</Checkbox>
49+
)
50+
}
51+
```
52+
53+
### Using icons
54+
55+
Using a custom icon instead of the pretty checkbox default is easy. Use the `icon` prop and pass in your own JSX. Supported types are:
56+
57+
* `i`
58+
* `svg`
59+
* `img`
60+
61+
```jsx
62+
import React from 'react'
63+
import { Checkbox, useCheckboxState } from 'pretty-checkbox-react';
64+
65+
function App() {
66+
const checkbox = useCheckboxState();
67+
68+
return (
69+
<Checkbox icon={<i className="far fa-check" />} {...checkbox}>
70+
Yes! I want emails!
71+
</Checkbox>
72+
)
73+
}
74+
```
75+
76+
### Specifying shape
77+
78+
Use the `shape` prop to control the shape of the checkbox. Supported values are:
79+
80+
* `square`
81+
* `round`
82+
* `curve`
83+
84+
### `indeterminate` state
85+
86+
You can programmatically set checkbox value as `indeterminate`:
87+
88+
```jsx
89+
import React from 'react'
90+
import classNames from 'classnames';
91+
import { Checkbox, useCheckboxState } from 'pretty-checkbox-react';
92+
93+
function useTreeState({ values }) {
94+
const group = useCheckboxState();
95+
const items = useCheckboxState();
96+
97+
React.useEffect(() => {
98+
if (group.state === true) {
99+
items.setState(values);
100+
} else if (group.state === false) {
101+
items.setState([]);
102+
}
103+
}, [group.state]);
104+
105+
React.useEffect(() => {
106+
if (items.state.length === values.length) {
107+
group.setState(true);
108+
} else if ((items.state as string[]).length) {
109+
group.setState('indeterminate');
110+
} else {
111+
group.setState(false);
112+
}
113+
}, [items.state]);
114+
115+
return { group, items };
116+
}
117+
118+
function App() {
119+
const values = ['Apple', 'Orange', 'Watermelon'];
120+
const { group, items } = useTreeState({ values });
121+
122+
return (
123+
<ul>
124+
<li>
125+
<Checkbox
126+
{...group}
127+
icon={
128+
<i
129+
className={classNames('mdi', {
130+
'mdi-minus': group.state === 'indeterminate',
131+
'mdi-check': group.state === true,
132+
})}
133+
/>
134+
}>
135+
Fruits
136+
</Checkbox>
137+
</li>
138+
<ul>
139+
{values.map((value, i) => (
140+
<li key={i}>
141+
<Checkbox
142+
{...items}
143+
icon={<i className="mdi mdi-check" />}
144+
value={value}>
145+
{value}
146+
</Checkbox>
147+
</li>
148+
))}
149+
</ul>
150+
</ul>
151+
);
152+
}
153+
```
154+
155+
156+

0 commit comments

Comments
 (0)