react-checkbox-group - npm Package Compare versions

Comparing version 4.0.1 to 5.0.0

package.json

 {
   "name": "react-checkbox-group",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "description": "Sensible checkbox groups manipulation for DOM.",
-  "main": "react-checkbox-group.js",
+  "main": "lib/index.js",
   "scripts": {
-    "test": "mocha --require babel-core/register --require ./test/test_helper.js  --recursive",
-    "test:watch": "npm run test -- --watch",
-    "prepublish": "babel ./react-checkbox-group.jsx --out-file ./react-checkbox-group.js"
+    "build": "tsc",
+    "test": "jest",
+    "prepublish": "yarn build"
   },
@@ -31,13 +31,18 @@ "repository": {
   "devDependencies": {
-    "babel-cli": "^6.6.5",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.6.5",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.1.18",
-    "chai": "^4.1.2",
-    "jsdom": "^11.3.0",
-    "mocha": "^5.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "@testing-library/react": "^8.0.5",
+    "@types/jest": "^24.0.15",
+    "@types/react": "^16.8.23",
+    "jest": "^24.8.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "ts-jest": "^24.0.2",
+    "typescript": "^3.5.3"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "jest": {
+    "preset": "ts-jest"
   }
 }

README.md

 # [React](http://facebook.github.io/react/)-checkbox-group
-### Heavily inspired from https://github.com/chenglou/react-radio-group
 
@@ -12,5 +11,20 @@ [![Greenkeeper badge](https://badges.greenkeeper.io/ziad-saab/react-checkbox-group.svg)](https://greenkeeper.io/)
 <form>
-  <input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="apple" />Apple
-  <input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="orange" />Orange
-  <input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="watermelon" />Watermelon
+  <input
+    onChange="{handleFruitChange}"
+    type="checkbox"
+    name="fruit"
+    value="apple"
+  />Apple
+  <input
+    onChange="{handleFruitChange}"
+    type="checkbox"
+    name="fruit"
+    value="orange"
+  />Orange
+  <input
+    onChange="{handleFruitChange}"
+    type="checkbox"
+    name="fruit"
+    value="watermelon"
+  />Watermelon
 </form>
@@ -20,36 +34,9 @@ ```
 Repetitive, hard to manipulate and easily desynchronized.
-Lift up `name` and `onChange`, and give the group an initial checked values array:
+Lift up `name` and `onChange`, and give the group an initial checked values array.
+See below for a [complete example](#example)
 
-```javascript
-import {Checkbox, CheckboxGroup} from 'react-checkbox-group';
-
-<CheckboxGroup name="fruits" value={['kiwi', 'pineapple']} onChange={this.fruitsChanged}>
-  <Checkbox value="kiwi"/>
-  <Checkbox value="pineapple"/>
-  <Checkbox value="watermelon"/>
-</CheckboxGroup>
-```
-
-Listen for changes, get the new value as intuitively as possible:
-
-```javascript
-<CheckboxGroup name="fruit" value={['apple','watermelon']} onChange={this.handleChange}>
-...
-</CheckboxGroup>
-```
-
-and further
-
-```javascript
-function handleChange(newValues) {
-  // ['apple']
-}
-```
-
-That's it for the API! See below for a complete example.
-
 ## Install
 
 ```sh
-bower install react-checkbox-group
+npm install react-checkbox-group
 ```
@@ -60,3 +47,3 @@
 ```sh
-npm install react-checkbox-group
+yarn add react-checkbox-group
 ```
@@ -66,62 +53,40 @@
 
-```javascript
-var Check = require('react-checkbox-group');
-var Checkbox = Check.Checkbox;
-var CheckboxGroup = Check.CheckboxGroup;
-
-// or ES6
-import {Checkbox, CheckboxGroup} from 'react-checkbox-group';
+```tsx
+import CheckboxGroup from 'react-checkbox-group'
 ```
 
-## Nested `Checkbox`
-If you render `Checkbox`es deeply nested inside the `CheckboxGroup`, you need to pass a `checkboxDepth` prop to the `CheckboxGroup` so that it can manage the checkboxes without too much overhead.
+## Example
 
-This is shown in the example below where the `<Checkbox>` elements are nested inside `<label>`s.
+```tsx
+import React, { useState, useEffect } from 'react'
+import CheckboxGroup from 'react-checkbox-group'
 
-## Example
+const Demo = () => {
+  // Initialize the checked values
+  const [fuits, setFruits] = useState<string[]>(['apple', 'watermelon'])
 
-```javascript
-class Demo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      fruits: ['apple','watermelon']
-    };
-  }
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setFruits(['apple', 'orange'])
+    }, 5000)
 
-  componentDidMount() {
-    // Add orange and remove watermelon after 5 seconds
-    setTimeout(() => {
-      this.setState({
-        fruits: ['apple','orange']
-      });
-    }, 5000);
-  }
+    return () => clearTimeout(timer)
+  }, [])
 
-  render() {
-    // the checkboxes can be arbitrarily deep. They will always be fetched and
-    // attached the `name` attribute correctly. `value` is optional
-    return (
-      <CheckboxGroup
-        checkboxDepth={2} // This is needed to optimize the checkbox group
-        name="fruits"
-        value={this.state.fruits}
-        onChange={this.fruitsChanged}>
+  return (
+    <CheckboxGroup name="fruits" value={fruits} onChange={setFruits}>
+      <label>
+        <Checkbox value="apple" /> Apple
+      </label>
+      <label>
+        <Checkbox value="orange" /> Orange
+      </label>
+      <label>
+        <Checkbox value="watermelon" /> Watermelon
+      </label>
+    </CheckboxGroup>
+  )
+}
 
-        <label><Checkbox value="apple"/> Apple</label>
-        <label><Checkbox value="orange"/> Orange</label>
-        <label><Checkbox value="watermelon"/> Watermelon</label>
-      </CheckboxGroup>
-    );
-  }
-  
-  fruitsChanged = (newFruits) => {
-    this.setState({
-      fruits: newFruits
-    });
-  }
-  
-};
-
-ReactDOM.render(<Demo/>, document.body);
+ReactDOM.render(<Demo />, document.body)
 ```
@@ -128,0 +93,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

8

decreased by-20%

Worsened metrics

Total package byte prevSize

5448

decreased by-91.62%

Dependency count

2

increased byInfinity%

Number of package files

7

decreased by-56.25%

Lines of code

56

decreased by-88.19%

Number of lines in readme file

93

decreased by-27.34%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes