react-timeout - npm Package Compare versions

Comparing version 0.16.1 to 1.0.0

package.json

 {
   "name": "react-timeout",
-  "version": "0.16.1",
-  "description": "Component wrapper for setTimeout et al that cleans up after itself.",
+  "version": "1.0.0",
+  "description": "HOC for React and React Native providing versions of setTimeout etc. that cancels when unmounted.",
   "homepage": "https://github.com/plougsgaard/react-timeout",
@@ -15,3 +15,5 @@ "author": "plougsgaard",
     "native",
-    "timer"
+    "timer",
+    "timeout",
+    "hoc"
   ],
@@ -34,12 +36,12 @@ "license": "MIT",
     "babel-preset-react": "^6.1.18",
-    "babel-preset-stage-0": "^6.1.18",
+    "babel-preset-stage-1": "^6.1.18",
     "chai": "^3.4.1",
     "chai-immutable": "^1.5.3",
-    "immutable": "^3.7.5",
+    "immutable": "^3.8.0",
     "jsdom": "^7.0.2",
     "mocha": "^2.3.4",
-    "react": "^0.14.3",
-    "react-addons-test-utils": "^0.14.3",
-    "react-dom": "^0.14.3"
+    "react": "^0.14.8",
+    "react-addons-test-utils": "^0.14.8",
+    "react-dom": "^0.14.8"
   }
 }

README.md

@@ -5,4 +5,8 @@ # React Timeout
 
-A component wrapper providing **safe-to-use-with-react** versions of
+> Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.
 
+Seeing a lot of the above? If so this might be useful!
+
+React Timeout is a higher order component for [React](https://github.com/facebook/react) and [React Native](https://github.com/facebook/react-native) providing the wrapped component with **safe** versions of
+
 Set                     | Clear
@@ -15,5 +19,5 @@ ------------------------|------------------------
 
-When the component is *unmounted* the wrapper calls the **Clear** functions for you.
+When the wrapped component is *unmounted*, any lingering timers will be canceled automatically.
 
-## Installation
+# Installation
 
@@ -38,39 +42,80 @@ `npm install --save react-timeout`
 
-## Usage
+# Examples
 
-Apply **ReactTimeout** using composition
+## React "Classic" (verbose)
 
+This simulates a light switch that takes `5000ms` to switch between `on` and `!on`.
+
 ```javascript
-class Example extends Component { .. }
-const WithReactTimeout = ReactTimeout(Example)
+import ReactTimeout from 'react-timeout'
+
+var Example = React.createClass({
+  toggleOn: function () {
+    this.setState({ on: !this.state.on })
+  },
+  handleClick: function (e) {
+    this.props.setTimeout(this.toggleOn, 5000)
+  },
+  render: function () {
+    return (
+      <button
+        style={{ backgroundColor: (this.state.on ? 'yellow' : 'gray') }}
+        onClick={this.handleClick}>Click me!</button>
+    )
+  }
+})
+
+export default ReactTimeout(Example)
 ```
 
-or an annotation (not recommended)
+Had we just called the regular old `setTimeout` and unmounted the component, the callback would still fire and try setting the state of an unmounted component. However since we use `ReactTimeout` the `this.props.setTimeout` will get canceled the moment the component unmounts.
 
+## ES6 Classes
+
 ```javascript
-@ReactTimeout
-class WithReactTimeout extends Component { .. }
+class Example extends Component {
+  render() {
+    return (
+      <button
+        onClick={() => this.props.setTimeout(..)}>Click me!</button>
+    )
+  }
+}
+export default ReactTimeout(Example)
 ```
 
-Invoke a safe `setTimeout` from within the component.
+## Functional Stateless Components
 
 ```javascript
-const { setTimeout } = this.props.reactTimeout
-const id = setTimeout(() => {
-  console.log(`The callback with ${id} fired!`)
-}, 5000)
+const Example = ({ setTimeout }) => ({
+  <button
+    onClick={() => setTimeout(..)}>Click me!</button>
+})
+export default ReactTimeout(Example)
 ```
 
-The callback function will be cleared if the component unmounts before the `5000ms` elapse.
+## With ES7 Annotations
 
-## Example
+```javascript
+@ReactTimeout
+class Example extends Component { .. }
+```
 
-A full example is available in `example/src/example.js`.
+```javascript
+@ReactTimeout
+var Example = React.createClass({ .. })
+```
 
-To run the example, clone the repository and run `npm install && npm start` in the `example/` folder.
+# Something similar
 
-## Similar
+## [react-timer-mixin](https://github.com/reactjs/react-timer-mixin)
 
-### [react-timer-mixin](https://github.com/reactjs/react-timer-mixin)
+The timer mixin recommended by the  [react-native](https://github.com/facebook/react-native) docs.
 
-The timer mixin recommended by the  [react-native](https://github.com/facebook/react-native) `README.md`.
+# Changes
+
+## Changes in ^1.0.0
+
+Since the major version changed from `0` to `1` the only breaking change is dropping the `reactTimeout` namespace.
+
+For example: `this.props.reactTimeout.setTimeout` becomes `this.props.setTimeout`.

src/reactTimeout.js

@@ -84,15 +84,13 @@ var objectAssign = require('object-assign')
             {
-              reactTimeout: {
-                setTimeout: this.setTimeout,
-                clearTimeout: this.clearTimeout,
+              setTimeout: this.setTimeout,
+              clearTimeout: this.clearTimeout,
 
-                setInterval: this.setInterval,
-                clearInterval: this.clearInterval,
+              setInterval: this.setInterval,
+              clearInterval: this.clearInterval,
 
-                setImmediate: this.setImmediate,
-                clearImmediate: this.clearImmediate,
+              setImmediate: this.setImmediate,
+              clearImmediate: this.clearImmediate,
 
-                requestAnimationFrame: this.requestAnimationFrame,
-                cancelAnimationFrame: this.cancelAnimationFrame
-              }
+              requestAnimationFrame: this.requestAnimationFrame,
+              cancelAnimationFrame: this.cancelAnimationFrame
             }))
@@ -99,0 +97,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

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

119

increased by60.81%

Worsened metrics

Total package byte prevSize

7812

decreased by-44.98%

Number of package files

7

decreased by-30%

Lines of code

89

decreased by-71.47%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes