Skip to content

Commit 8cb7014

Browse files
committed
Iniital commit
1 parent e652a5e commit 8cb7014

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+222
-5226
lines changed

.prettierignore

Lines changed: 0 additions & 1 deletion
This file was deleted.

README.md

Lines changed: 1 addition & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929
# Pretty Checkbox React
3030

31-
Pretty Checkbox React is a tiny react wrapper around the awesome pretty checkbox.
31+
Pretty Checkbox React is a pretty small react wrapper around the the pretty awesome library pretty checkbox.
3232

3333
## Getting Started
3434

@@ -41,154 +41,6 @@ npm i pretty-checkbox pretty-checkbox-react
4141
yarn add pretty-checkbox pretty-checkbox-react
4242
```
4343

44-
### Basic Example
45-
46-
```jsx
47-
import React from 'react';
48-
import { Checkbox } from 'pretty-checkbox-react';
49-
50-
import 'pretty-checkbox';
51-
52-
function App() {
53-
const [checked, setChecked] = React.useState(false);
54-
55-
const handleChange = React.useCallback(() => {
56-
setChecked(prev => !prev);
57-
}, []);
58-
59-
// or useReducer for shorthand...
60-
// const [checked, handleChange] = React.useReducer(state => !state, false);
61-
62-
React.useEffect(() => {
63-
if (checked) {
64-
// perform some side effect
65-
// when the state changes
66-
}
67-
}, [checked]);
68-
69-
return (
70-
<Checkbox state={checked} onChange={handleChange}>
71-
Yes! I want emails!
72-
</Checkbox>
73-
);
74-
}
75-
```
76-
77-
### `useState` Hooks
78-
79-
For your convenience, each component has a "useState" hook to takes care of connecting all the pieces together.
80-
81-
```jsx
82-
import React from 'react';
83-
import { Checkbox, useCheckboxState } from 'pretty-checkbox-react';
84-
85-
import 'pretty-checkbox';
86-
87-
function App() {
88-
const checkbox = useCheckboxState();
89-
90-
React.useEffect(() => {
91-
if (checkbox.state) {
92-
// perform some side effect
93-
// when the state changes
94-
}
95-
}, [chekbox.state]);
96-
97-
return <Checkbox {...checkbox}>Yes! I want emails!</Checkbox>;
98-
}
99-
```
100-
101-
### Basic Uncontrolled Example
102-
103-
PCR works as an uncontrolled component too. This allows you to easily integrate with tools like react-hook-form and other uncontrolled form solutions.
104-
105-
```jsx
106-
import React from 'react';
107-
import { Checkbox } from 'pretty-checkbox-react';
108-
109-
import 'pretty-checkbox';
110-
111-
const ref = React.createRef();
112-
113-
function App() {
114-
// or you can add a ref in your component
115-
// const ref = React.useRef();
116-
117-
return (
118-
<form
119-
onSubmit={e => {
120-
e.preventDefault();
121-
122-
if (!ref.current.checked) {
123-
alert('You must agree to the terms and conditions!');
124-
}
125-
126-
// do something else...
127-
}}>
128-
<Checkbox ref={ref}>I agree to the terms and conditions</Checkbox>
129-
</form>
130-
);
131-
}
132-
```
133-
134-
### With Class Components
135-
136-
React 16.8 is required for pretty checkbox react to work. If you're on the required version, then you can use class components too:
137-
138-
```jsx
139-
import * as React from 'react';
140-
import { Checkbox } from 'pretty-checkbox-react';
141-
142-
import 'pretty-checkbox';
143-
144-
class Demo extends React.Component {
145-
constructor(props) {
146-
super(props);
147-
148-
this.state = { checked: false };
149-
this.handleChange = this._handleChange.bind(this);
150-
}
151-
152-
_handleChange() {
153-
this.setState({ checked: true });
154-
}
155-
156-
render() {
157-
return (
158-
<Checkbox state={this.state.checked} onChange={this.handleChange}>
159-
Yes! I want emails!
160-
</Checkbox>
161-
);
162-
}
163-
}
164-
```
165-
166-
## Grouping Controls
167-
168-
To make working with managed form solutions easier, PCR has a generic `Group` component for usage with checkboxes and switches. For radio inputs, however, there is a special `RadioGroup` component.
169-
170-
```jsx
171-
import * as React from 'react';
172-
import { Radio, useRadioState, RadioGroup } from 'pretty-checkbox-react';
173-
174-
import 'pretty-checkbox';
175-
176-
function App() {
177-
const radio = useRadioState();
178-
179-
return (
180-
<RadioGroup {...radio}>
181-
<Radio value="yes" name="sub" {...radio}>
182-
Yes! I want emails
183-
</Radio>
184-
<Radio value="no" name="sub" {...radio}>
185-
No, I do not want emails
186-
</Radio>
187-
</RadioGroup>
188-
);
189-
}
190-
```
191-
19244
### Changelog
19345

19446
See the releases page.

cypress.json

Lines changed: 0 additions & 1 deletion
This file was deleted.

cypress/fixtures/example.json

Lines changed: 0 additions & 5 deletions
This file was deleted.

cypress/integration/checbox.spec.ts

Lines changed: 0 additions & 66 deletions
This file was deleted.

cypress/plugins/cy-ts-preprocessor.js

Lines changed: 0 additions & 26 deletions
This file was deleted.

cypress/plugins/index.js

Lines changed: 0 additions & 24 deletions
This file was deleted.

cypress/support/commands.ts

Lines changed: 0 additions & 21 deletions
This file was deleted.

cypress/support/index.d.ts

Lines changed: 0 additions & 11 deletions
This file was deleted.

cypress/support/index.js

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)