Motivation

Sometimes, classic scrollbars and on-screen keyboards shall be excluded when calculating the dimensions of a document.

Details

• Visual Viewport API specification
• Add useViewportScrollCoords, useViewportSize and useViewportScale hooks
• Keep useWindowScrollCoords and useWindowSize hooks, optionally updating their docs to emphasize which elements are included in the results

Motivation

Track whether a document matches the given media query. This may also be used for a usePreferredColorScheme (or useDarkMode) hook.

Basic example

const isDesktop = useMedia('(min-width: 1024px)');

Details

• Window.matchMedia()

I am getting this error.

TypeScript error: Cannot find name 'NetworkInformation'.  TS2304
    15 |  * }
    16 |  */
  > 17 | export default function useNetworkInformation(): NetworkInformation | undefined;
       |                                                  ^
    18 | 

{
	"compilerOptions": {
		"baseUrl": "src",
		"outDir": "build",
		"module": "commonjs",
		"lib": [ "es6", "dom" ],
		"allowJs": true,
		"jsx": "react",
		"moduleResolution": "node",
		"rootDir": "src",
	},
	"exclude": [
		"build",
		"config",
		"node_modules",
		"scripts"
	],
	"include": [ "src" ],
	"types": [
		"typePatches"
	]
}

As discussed on Reddit, the word "standard" may confuse some users:

Seeing the word "standard" in the name gives me flashbacks of the so-called "standard" config for ESLint which was not at all standard and quite opinionated in parts. – qeBhuajX5JAooqbRNiNv

I am open towards further discussion, listening to any viable alternatives which would eliminate bad feelings related to branding. The only requirement is that the name has to be generic enough to cover all the aspects of the library.

Motivation

Similar to how react-intersection-observer handles registering observer callbacks, construction of the ResizeObserver object may be pooled.

Motivation

When it comes to interacting with the clipboard, multiple options are available. The Clipboard API is not yet widely supported by browsers.

A compatible solution should be available out of the box:

• Try using the new Clipboard API by default
• Fallback to document.execCommand() if necessary

Basic example

function Example() {
  const { copy, cut, paste } = useClipboard();
  const [value, setValue] = useState('foo');

  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button type="button" onClick={() => copy(value)}>Copy</button>
    </>
  );
}

This project needs a logo of its own. It would be displayed in the readme and as a 1280×640px social media preview.

Personally, I was thinking about an anchor icon representing a hook, with "standard-hooks" written next to it. The project's name may be broken into two lines, making the use of "-" optional.

Motivation

According to multiple sources, setting a value of a Storage object causes a side effect, which should not be handled by reducers, but with useEffect.

Description

The useMedia (and usePreferredColorScheme, since it uses useMedia) hook doesn't work on Safari, either MacOS and iOS.
This is because the MediaQueryList interface on Safari doesn't inherit any methods from EventTarget, and because of that not exposing addEventListener and removeEventListener methods.

Since the util managedEventListener is used widely in the library, I think we should create a new specific function to handle this "edge" case, that just checks if target.addListener / target.removeListener are functions and call them instead of add/removeEventListener

Reproduction

use useMedia hook on Safari, the console should log:
TypeError: target.addEventListener is not a function. (In 'target.addEventListener(type, callback, options)', 'target.addEventListener' is undefined)

Environment

System:

• OS: macOS Mojave 10.14.4
• CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
• Memory: 35.11 MB / 16.00 GB
• Shell: 5.3 - /bin/zsh

Binaries:

• Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
• Yarn: 1.17.3 - /usr/local/bin/yarn
• npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
• Watchman: 4.9.0 - /usr/local/bin/watchman

Browsers:

• Chrome: 77.0.3865.120
• Firefox: 69.0.3
• Safari: 12.1

npmPackages:

• react: ^16.9.0 => 16.10.2
• web-api-hooks: ^2.0.0 => 2.0.0

Motivation

Memory is a finite resource. Developers may want to limit the amount of stored history entries.

Motivation

Arrays used as state variables may have a desired length limit. The EvictingQueue data structure was just made with this purpose in mind. Encapsulating it in a hook as a middleware would allow its usage with any kind of state-returning functions (e.g. useState or even useLocalStorage).

Basic example

function Example() {
  const chatMessages = useEvictingQueue(100, useState<string[]>([]));
}

import { useCallback } from 'react';

export default function useEvictingQueue<T>(
  maxLength: number,
  [value, setValue]: [T[], React.Dispatch<React.SetStateAction<T[]>>],
) {
  const newSetValue = useCallback(
    (update: React.SetStateAction<T[]>) => {
      setValue(prevValue => {
        const nextValue =
          typeof update === 'function' ? update(prevValue) : update;
        return nextValue.length > maxLength
          ? nextValue.slice(nextValue.length - maxLength)
          : nextValue;
      });
    },
    [maxLength, setValue],
  );

  return [value, newSetValue];
}

Motivation

Sometimes, multiple actions might be undone or redone at once.

Details

• The steps parameter should default to 1

Motivation

The Generic Sensor API features a base Sensor interface to build detectors upon. It would deprecate the following hooks:

• useDeviceMotion
• useDeviceOrientation

Currently, the browser support is low, but polyfills are available.

Details

• Sensors for the Web! - Google Developers
• Generic Sensor API playground

Description

When the eslint-plugin-import/no-unresolved rule is enforced, errors are thrown for imports from standard-hooks.

Motivation

One may need to know the exact size of a DOM node, to know whether it's big or small enough.

Details

How can I measure a DOM node? – React Hooks FAQ:

function MeasureExample() {
  const [rect, ref] = useClientRect();
  return (
    <>
      <h1 ref={ref}>Hello, world</h1>
      {rect !== null &&
        <h2>The above header is {Math.round(rect.height)}px tall</h2>
      }
    </>
  );
}

function useClientRect() {
  const [rect, setRect] = useState(null);
  const ref = useCallback(node => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);
  return [rect, ref];
}

Description

Hey! Thanks for the awesome project. I’m having a problem where multiple calls to useLocalStorage('my-key') from different components are not staying in sync as the value changes.

Reproduction

I’ve reproduced it in this sandbox:

https://codesandbox.io/s/distracted-bash-x9k10?file=/pages/index.js

Expected behavior

If my localStorage value changes, all my components watching that value pick up the change.

Actual behavior

The hook seems to be initializing from localStorage into individual instances of useState and then never reading from localStorage again.

Motivation

Scroll events may be fired at a high frequency, without taking unwanted framerate drops into account.

Details

A similar problem is present for virtual scrolling/windowing approaches. We should follow the thread below for further information:

• "Ideally there would be some way to tell the browser to fire scroll events synced to the frame rate rather than sending them asynchronously (and probably debouncing)" – Devon Govett

Motivation

Being readme-embedded, the documentation is starting to get cluttered and incomprehensible. Interactive playgrounds and use-cases should be provided for each hook and their configurable parameters.

Details

For example, Chakra UI provides concise and comprehensible docs for their components, packed with editable examples usable out of the box.

A similar approach is desired for standard-hooks, while keeping JSDoc comments in sync with the ones on the web, preferably with automation.

I'm wondering if useMedia could be a simpler API than useWindowSize and useDeviceOrientation.

Example usage

const isWidescreen = useMedia('(min-width: 500px)');

Any thoughts?

Motivation

Data fetching is a common practice in web applications. While a useFetch hook would be useful, React's Suspense API is destined to replace it.

Basic example

https://codesandbox.io/s/jvvkoo8pq3, taken from the official React Hooks FAQ

Details

How to fetch data with React Hooks? – Robin Wieruch

Motivation

Pagination components rely upon counters. This hook wraps a state-returning hook and appends increment and decrement functionality to the returned tuple.

Basic example

function Example() {
  const [page, setPage, incrementPage, decrementPage] = useCounter(
    useState(1),
    1, // minValue
    100, // maxValue
  );
}

Motivation

While the current implementation of useToggle handles a given state variable specially, wrapper syntax would allow it to control custom states (e.g. the one returned by useLocalStorage).

Basic example

function Example() {
  const [isPressed, togglePressed] = useToggle(useLocalStorage('isPressed', false));
}

Motivation

Users might make mistakes or just want to explore their previous actions. Both use-cases can be covered by extending state setters with undo/redo commands.

Basic example

function Example() {
  const [value, setValue, undoValue, redoValue] = useUndoable(useState('foo'));
}

Motivation

Dark mode is getting increasingly popular. Developers may want to track the color scheme preference of users.

Basic example

const preferredColorScheme = usePreferredColorScheme();

Details

• Depends on useMedia (#9)

Description

When changing the maxLength parameter given to useTimeline, the result is kept bigger even when the given array length limit is exceeded.

Please see microsoft/TypeScript-DOM-lib-generator#732 for further details.

The code below should be removed and replaced with just VisibilityState:

type StandardVisibilityState = Exclude<VisibilityState, 'prerender'>;

Motivation

Since the contributor has to run yarn format and yarn lint before committing, this can result in someone committing without running both of these. We could add husky to handle this for us automatically and ensure commits are correct in terms of format and lint before code review in PR.

Basic example

Just by git commit -m "MESSAGE" the code would be linted and formatted.

Motivation

Sometimes, the previous value of a variable may be needed through subsequent re-renders.

Basic example

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return <h1>Now: {count}, before: {prevCount}</h1>;
}

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

Description

using useSize I get the following error in a Typescript setup:
Object(...) is not a function

Reproduction

const imageRef = useRef(null);
const [width, height] = useSize(imageRef);
return <img ref={imageRef} srcSet={`${src} 1x`} src={src} />;

Motivation

usePrevious (#18) can be used to retrieve the last single previous value of a variable. A useTimeline hook would make it possible to track the last N different values of a given value, useful for keeping a log of changes.

Basic example

function Counter() {
  const [count, setCount] = useState(0);
  const prevCounts = useTimeline(count);
  return <h1>Now: {count}, history: {prevCounts}</h1>;
}

Now: 3, history: [0, 1, 2]

Description

When rendering on the server-side, useMedia and its dependents always return false.

Motivation

Inspired by useScrolling of react-use, a generic state wrapper hook (useChanging?) could be added with an optionally specifiable maximum delay between changes.

Basic example

const windowSize = useWindowSize();

// If the value of `windowSize` changes at least every 150ms,
// then `isWindowSizeChanging` should be `true`
const isWindowSizeChanging = useChanging(windowSize, 150);