Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6bc26f0

Browse files
ts and hooks refactor
1 parent e2c5034 commit 6bc26f0

30 files changed

+4314
-2348
lines changed

‎.babelrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212
],
1313
"@babel/preset-react",
14-
"@babel/preset-flow"
14+
"@babel/preset-typescript"
1515
],
1616
"plugins": [
1717
"@babel/plugin-proposal-object-rest-spread",

‎.eslintrc.json

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,13 @@
11
{
2-
"env": {
3-
"browser": true,
4-
"es6": true,
5-
"commonjs": true,
6-
"node": true,
7-
"jest": true,
8-
"mocha": true
9-
},
102
"globals": {
113
"__DEV__": true
124
},
13-
"extends": [
14-
"wiremore",
15-
"wiremore/react",
16-
"plugin:react/recommended",
17-
"prettier",
18-
"prettier/react",
19-
"plugin:flowtype/recommended"
20-
],
21-
"settings": {
22-
"flowtype": {
23-
"onlyFilesWithFlowAnnotation": true
24-
}
25-
},
26-
"plugins": ["prettier", "flowtype"],
5+
"extends": ["wiremore", "wiremore/react", "wiremore/typescript"],
276
"rules": {
287
"import/named": 0,
298
"import/no-unassigned-import": 0,
309
"import/no-named-as-default-member": 0,
31-
"prettier/prettier": "error"
10+
"prettier/prettier": "error",
11+
"react-hooks/exhaustive-deps": 1
3212
}
3313
}

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,5 @@ typings/
5757
# dotenv environment variables file
5858
.env
5959

60+
dist
61+
es

‎.huskyrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"hooks": {
3+
"post-merge": "install-deps-postmerge",
4+
"pre-commit": "lint-staged"
5+
}
6+
}

‎.lintstagedrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"*.{js,jsx,ts,tsx,css}": [
3+
"prettier --write",
4+
"git add"
5+
],
6+
"*.{js,jsx,ts,tsx}": [
7+
"yarn lint:js --fix",
8+
"git add"
9+
]
10+
}

‎README.md

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# ⚛ React Checkbox Context
22

3-
This package was heavily inspired by [react-checkbox-group](https://github.com/ziad-saab/react-checkbox-group) after it stopped working the way I used it. `<Checkbox />` elements suddenly had to be direct children of `<CheckboxGroup>` (which was impossible for my use case) or the `CheckboxGroup` explicitly needed to have a `checkboxDepth` prop (which was not flexible enough for me). So I decided to write my own `<CheckboxGroup>` component based on React's new [Context API](https://reactjs.org/docs/context.html).
3+
This package was heavily inspired by [react-checkbox-group](https://github.com/ziad-saab/react-checkbox-group) after it stopped working the way I used it. `<Checkbox />` elements suddenly had to be direct children of `<CheckboxGroup>` (which was impossible for my use case) or the `CheckboxGroup` explicitly needed to have a `checkboxDepth` prop (which was not flexible enough for me). So I decided to write my own `<CheckboxGroup>` component based on React's (then) new [Context API](https://reactjs.org/docs/context.html).
44

55
Big thank you to [Ziad Saab](https://github.com/ziad-saab) for the inspiration!
66

@@ -9,6 +9,7 @@ Big thank you to [Ziad Saab](https://github.com/ziad-saab) for the inspiration!
99
```
1010
npm install react-checkbox-context
1111
```
12+
1213
or
1314

1415
```
@@ -21,54 +22,60 @@ What does `react-checkbox-context` do and how does it do that? Let me borrow the
2122

2223
This is your average checkbox group:
2324

24-
```js
25+
```jsx
2526
<form>
26-
<input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="apple" /> Apple
27-
<input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="orange" /> Orange
28-
<input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="watermelon" /> Watermelon
27+
<input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="apple" /> Apple
28+
<input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="orange" /> Orange
29+
<input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="watermelon" />{' '}
30+
Watermelon
2931
</form>
3032
```
3133

3234
Repetitive, hard to manipulate and easily desynchronized. Lift up name and onChange, and give the group an initial checked values array:
3335

34-
```js
36+
```jsx
3537
import { Checkbox, CheckboxGroup } from 'react-checkbox-context';
3638

3739
<CheckboxGroup name="fruits" values={['kiwi', 'pineapple']}>
38-
<Checkbox value="kiwi" /> Kiwi
39-
<Checkbox value="pineapple" /> Pineapple
40-
<Checkbox value="watermelon" /> Watermelon
40+
<Checkbox value="kiwi" /> Kiwi
41+
<Checkbox value="pineapple" /> Pineapple
42+
<Checkbox value="watermelon" /> Watermelon
4143
</CheckboxGroup>;
4244
```
4345

4446
Since this component uses React's Context API, `<Checkbox>` elements can by anywhere inside of a `<CheckboxGroup>` and **do not** have to be a direct descendant! So this is easily possible **without** having to specify any `checkboxDepth` props or the like:
4547

46-
```js
47-
<CheckboxGroup name="frameworks" onChange={(event, selectedValues) => { console.log(selectedValues); }}>
48-
<p>
49-
<label htmlFor="react">
50-
<Checkbox value="react" id="react" /> React
51-
</label>
52-
</p>
53-
<p>
54-
<label htmlFor="vue">
55-
<Checkbox value="vue" id="vue" /> Vue
56-
</label>
57-
</p>
48+
```jsx
49+
<CheckboxGroup
50+
name="frameworks"
51+
onChange={(event, selectedValues) => {
52+
console.log(selectedValues);
53+
}}
54+
>
55+
<p>
56+
<label htmlFor="react">
57+
<Checkbox value="react" id="react" /> React
58+
</label>
59+
</p>
60+
<p>
61+
<label htmlFor="vue">
62+
<Checkbox value="vue" id="vue" /> Vue
63+
</label>
64+
</p>
5865
</CheckboxGroup>
5966
```
6067

61-
**Attention:** When migrating from `react-checkbox-group` please note that the prop name to pass the values to a `CheckboxGroup` is named `values` instead of `value` since it's an array and as such sounds more logical to me to be plural.
68+
**Attention:** When migrating from `react-checkbox-group` please note that the prop name to pass the values to a `CheckboxGroup` is named `values` instead of `value`.
6269

6370
## Props
6471

6572
### `<CheckboxGroup />`
6673

67-
| Prop | Type | Description |
68-
| ---------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------- |
69-
| `onChange` | `(originalEvent: SyntheticEvent<HTMLInputElement>, values: Array<string>) => void` | Will be called on every time a checkbox changes its state. |
70-
| `name` | `string` | Name for all checkboxes within one `<CheckboxGroup>` |
71-
| `values` | `Array<string>` | Values of the `<Checkbox>` elements marked as `checked` |
74+
| Prop | Type | Description |
75+
| ---------- | ------------------------------------------------ | ---------------------------------------------------------- |
76+
| `onChange` | `(event: ChangeEvent, values: string[]) => void` | Will be called on every time a checkbox changes its state. |
77+
| `name` | `string` | Name for all checkboxes within one `<CheckboxGroup>` |
78+
| `values` | `string[]` | Values of the `<Checkbox>` elements marked as `checked` |
7279

7380
Status of checkboxes (checked/unchecked) can be controlled from outside by passing new values to `<CheckboxGroup>` (e.g. `<CheckboxGroup values={this.state.checkedItems} />`).
7481

@@ -78,7 +85,7 @@ The `Checkbox` component passes all of its props the the underlying `<input type
7885

7986
## Todo
8087

81-
* Add more tests, especially with Enzyme to be able to check if `onChange` events are fired correctly.
88+
- Add more tests, more specifically a test if `onChange` events are fired correctly.
8289

8390
## License
8491

‎es/Checkbox.js

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

‎es/CheckboxGroup.js

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

‎es/context.js

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

‎es/index.js

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

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /