@shopify/react-hooks
A collection of primitive React hooks.
Last updated 5 days ago by shopify-dep .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @shopify/react-hooks 
SYNC missed versions from official npm registry.

@shopify/react-hooks

Build Status License: MIT npm version npm bundle size (minified + gzip)

A collection of primitive React hooks.

Installation

$ yarn add @shopify/react-hooks

Usage

useOnValueChange()

This hook will track a given value and invoke a callback when it has changed.

function MyComponent({foo}: {foo: string}) {
  useOnValueChange(foo, (newValue, oldValue) => {
    console.log(`foo changed from ${oldValue} to ${newValue}`);
  });

  return null;
}

useTimeout()

This hook provides a declarative version of setTimeout(). The first argument is a callback that will be invoked after the given delay (number of milliseconds) as the second argument.

function MyComponent() {
  const [foo, setFoo] = React.useState('Bar');

  useTimeout(() => setFoo('Baz!'), 5000);

  return <div>{foo}</div>;
}

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.

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

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

  return null;
}

useMountedRef()

This hook keep track of a component's mounted / un-mounted status and returns a ref object like React’s useRef with a boolean value representing said status. This is often use when a component contains async task that set state after the task resolved.

import React from 'react';
import {useMountedRef} from '@shopify/react-hooks';

function MockComponent() {
  const [result, setResult] = React.useState();
  const mounted = useMountedRef();

  async function handleOnClick() {
    const result = await fetchData();

    if (mounted.current) {
      setData(result);
    }
  }

  return (
    <button onClick={handleOnClick} type="button">
      Fetch Data
    </button>
  );
}

Current Tags

  • 1.2.5                                ...           latest (5 days ago)

11 Versions

  • 1.2.5                                ...           5 days ago
  • 1.2.4                                ...           6 days ago
  • 1.2.3                                ...           a month ago
  • 1.2.2                                ...           2 months ago
  • 1.2.1                                ...           6 months ago
  • 1.2.0                                ...           6 months ago
  • 1.1.2                                ...           6 months ago
  • 1.1.1                                ...           6 months ago
  • 1.1.0                                ...           6 months ago
  • 1.0.1                                ...           6 months ago
  • 1.0.0                                ...           6 months ago

Copyright 2014 - 2016 © taobao.org |