		@@ -10,6 +10,12 @@ # Changelog

		## [1.0.1] - 2019-04-17
		## [1.1.0] - 2019-04-17

		### Added

		- Added a `useLazyRef` hook ([#659](https://github.com/Shopify/quilt/pull/659))

		## [1.0.0] - 2019-04-12

		### Added

		- `@shopify/react-hooks` package with initial hooks for `useTimeout` and `useOnValueChange` ([#609](https://github.com/Shopify/quilt/pull/609))

dist/hooks/index.d.ts

		@@ -0,2 +1,3 @@
		export { useLazyRef } from './lazy-ref';
		export { default as useTimeout } from './timeout';
		export { default as useOnValueChange } from './on-value-change';

dist/hooks/index.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		var lazy_ref_1 = require("./lazy-ref");
		exports.useLazyRef = lazy_ref_1.useLazyRef;
		var timeout_1 = require("./timeout");
		@@ -4,0 +6,0 @@ exports.useTimeout = timeout_1.default;

package.json

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

README.md

		@@ -43,1 +43,17 @@ # `@shopify/react-hooks`
		```

		### `useLazyRef()`

		This hook creates a ref object like React’s `useRef`, but instead of providing it the value directly, you provide a function that returns the value. The first time the hook is run, it will call the function and use the returned value as the initial `ref.current` value. Afterwards, the function is never invoked. You can use this for creating refs to values that are expensive to initialize.

		```tsx
		function MyComponent() {
		const ref = useLazyRef(() => someExpensiveOperation());

		React.useEffect(() => {
		console.log('Initialized expensive ref', ref.current);
		});

		return null;
		}
		```

@shopify/react-hooks - npm Package Compare versions

New alerts