@shopify/react-hooks - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

CHANGELOG.md

		@@ -8,4 +8,16 @@ # Changelog

		## [Unreleased]
		<!-- ## [Unreleased] -->

		## [1.6.0] - 2020-03-02

		### Added

		- Added support for `null` `delay` argument to `useTimeout`, to clear the timeout ([#1306](https://github.com/Shopify/quilt/pull/1306))

		### Fixed

		- Improved `useTimeout` hook, so it doesn't reset the timeout if the `callback` changes ([#1306](https://github.com/Shopify/quilt/pull/1306))

		## [1.5.0] - 2020-03-12

		- Added `useInterval` hook ([#1241](https://github.com/Shopify/quilt/pull/1241))
		@@ -12,0 +24,0 @@

dist/src/hooks/timeout.d.ts

		@@ -1,2 +0,5 @@
		export declare function useTimeout(callback: () => void, delay: number): void;
		declare type IntervalCallback = () => void;
		declare type IntervalDelay = number \| null;
		export declare function useTimeout(callback: IntervalCallback, delay: IntervalDelay): void;
		export {};
		//# sourceMappingURL=timeout.d.ts.map

dist/src/hooks/timeout.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		var tslib_1 = require("tslib");
		var react_1 = tslib_1.__importDefault(require("react"));
		var react_1 = require("react");
		function useTimeout(callback, delay) {
		react_1.default.useEffect(function () {
		var id = setTimeout(callback, delay);
		return function () { return clearTimeout(id); };
		}, [callback, delay]);
		var savedCallback = react_1.useRef(callback);
		react_1.useEffect(function () {
		savedCallback.current = callback;
		}, [callback]);
		react_1.useEffect(function () {
		function tick() {
		savedCallback.current();
		}
		if (delay !== null) {
		var id_1 = setTimeout(tick, delay);
		return function () { return clearTimeout(id_1); };
		}
		}, [delay]);
		}
		exports.useTimeout = useTimeout;

package.json

		{
		"name": "@shopify/react-hooks",
		"version": "1.5.0",
		"version": "1.6.0",
		"license": "MIT",
		@@ -5,0 +5,0 @@ "description": "A collection of primitive React hooks.",

README.md

		@@ -32,11 +32,21 @@ # `@shopify/react-hooks`

		This hook provides a declarative version of [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout). The first argument is a callback that will be invoked after the given delay (number of milliseconds) as the second argument.
		This hook provides a declarative version of [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout). The first argument is a callback that will be invoked after the given delay (number of milliseconds) as the second argument. Optionally, the timeout can be disabled by passing `null` as the delay.

		```tsx
		function MyComponent() {
		const [foo, setFoo] = React.useState('Bar');
		const [status, setStatus] = React.useState('Pending');
		const pending = status === 'Pending';

		useTimeout(() => setFoo('Baz!'), 5000);
		const buttonLabel = pending ? 'Cancel' : 'Reset';
		const handleClick = () => setStatus(pending ? 'Cancelled' : 'Pending');
		const delay = pending ? 1000 : null;

		return <div>{foo}</div>;
		useTimeout(() => setStatus('Fired'), delay);

		return (
		<div>
		<div>{status}</div>
		<button onClick={handleClick}>{buttonLabel}</button>
		</div>
		);
		}
		@@ -43,0 +53,0 @@ ```

dist/src/hooks/timeout.d.ts.map

Sorry, the diff of this file is not supported yet

New alerts