open-index/open-npm huggingface dataset:
npm package: @jsxtools/uid
Description: Returns a unique URL-safe ID
Author: Jonathan Neal
Latest version: 1.0.6

# uid [<img src="https://avatars.githubusercontent.com/u/52989093" alt="" width="90" height="90" align="right">][frontend]

[<img alt="npm version" src="https://img.shields.io/npm/v/@jsxtools/uid.svg" height="20">](https://www.npmjs.com/package/@jsxtools/uid)
[<img alt="build status" src="https://img.shields.io/travis/jsxtools/frontend/master.svg" height="20">](https://travis-ci.org/github/jsxtools/frontend)
[<img alt="issue tracker" src="https://img.shields.io/github/issues/jsxtools/frontend/uid.svg" height="20">](https://github.com/jsxtools/frontend/issues?q=is:issue+is:open+label:uid)
[<img alt="pull requests" src="https://img.shields.io/github/issues-pr/jsxtools/frontend/uid.svg" height="20">](https://github.com/jsxtools/frontend/pulls?q=is:pr+is:open+label:uid)

**uid** returns a unique URL-safe ID.

It is <strong size>187 bytes (197 gzipped)</strong>.

## Installation

```sh
npm install @jsxtools/uid
```

## Usage

```js
import uid from '@jsxtools/uid';

// give <body> a unique ID with 5 characters, like "wAl_H"
// in 1s at 4000 IDs/s it has a 1% probability of at least 1 collision
document.body.id = uid(5);

// give <body> a unique ID like "wAl_Hh9fYRe"
// in 4d at 4000 IDs/s it has a 1% probability of at least 1 collision
document.body.id = uid(11);

// give <body> a unique ID like "wAl_Hh9fYReEakFYN-7qr"
// in 10,000,000y at 4000 IDs/s it has a 1% probability of at least 1 collision
document.body.id = uid(21);
```

[frontend]: https://github.com/jsxtools/frontend
npm package: @jsxtools/use-debounced-state-factory
Description: Returns a hook that provides a state and setter that throttle updates coming in rapid succession.
Author: Jonathan Neal
Latest version: 1.0.5

# use-debounced-state-factory [<img src="https://avatars.githubusercontent.com/u/52989093" alt="" width="90" height="90" align="right">][frontend]

[<img alt="npm version" src="https://img.shields.io/npm/v/@jsxtools/use-debounced-state-factory.svg" height="20">](https://www.npmjs.com/package/@jsxtools/use-debounced-state-factory)
[<img alt="build status" src="https://img.shields.io/travis/jsxtools/frontend/master.svg" height="20">](https://travis-ci.org/github/jsxtools/frontend)
[<img alt="issue tracker" src="https://img.shields.io/github/issues/jsxtools/frontend/use-debounced-state-factory.svg" height="20">](https://github.com/jsxtools/frontend/issues?q=is:issue+is:open+label:use-debounced-state-factory)
[<img alt="pull requests" src="https://img.shields.io/github/issues-pr/jsxtools/frontend/use-debounced-state-factory.svg" height="20">](https://github.com/jsxtools/frontend/pulls?q=is:pr+is:open+label:use-debounced-state-factory)

**use-debounced-state-factory** returns a [hook] that provides a state and setter that throttle updates coming in rapid succession.

It is <strong size>131 bytes (128 gzipped)</strong>.

## Installation

```sh
npm install @jsxtools/use-debounced-state-factory
```

## Usage

```js
import { useState } from 'react';
import useDebouncedStateFactory from '@jsxtools/use-debounced-state-factory';

const useDebouncedState = useDebouncedStateFactory({ useState });

function Component() {
  // successive updates to `searchTerm` to will be deferred by 400 milliseconds
  const [searchTerm, setSearchTerm] = useDebouncedState(initialState, 400);
  const onSearchTermInput = event => setSearchTerm(event.target.value);

  return (
    <p>
      <label htmlFor="q">Search</label>
      <input id="q" name="q" defaultValue="" onInput={onSearchTermInput}>
    </p>
  )
}
```

[hook]: https://reactjs.org/docs/hooks-reference.html
[frontend]: https://github.com/jsxtools/frontend
npm package: @jsxtools/use-equal-state-factory
Description: Returns a hook that provides a state and setter that check for shallow or deep changes.
Author: Jonathan Neal
Latest version: 1.0.5

# use-equal-state-factory [<img src="https://avatars.githubusercontent.com/u/52989093" alt="" width="90" height="90" align="right">][frontend]

[<img alt="npm version" src="https://img.shields.io/npm/v/@jsxtools/use-equal-state-factory.svg" height="20">](https://www.npmjs.com/package/@jsxtools/use-equal-state-factory)
[<img alt="build status" src="https://img.shields.io/travis/jsxtools/frontend/master.svg" height="20">](https://travis-ci.org/github/jsxtools/frontend)
[<img alt="issue tracker" src="https://img.shields.io/github/issues/jsxtools/frontend/use-equal-state-factory.svg" height="20">](https://github.com/jsxtools/frontend/issues?q=is:issue+is:open+label:use-equal-state-factory)
[<img alt="pull requests" src="https://img.shields.io/github/issues-pr/jsxtools/frontend/use-equal-state-factory.svg" height="20">](https://github.com/jsxtools/frontend/pulls?q=is:pr+is:open+label:use-equal-state-factory)

**use-equal-state-factory** returns a [hook] that provides a state and setter that check for shallow or deep changes.

It is <strong size>161 bytes (146 gzipped)</strong>.

## Installation

```sh
npm install @jsxtools/use-equal-state-factory
```

## Usage

```js
import { useState } from 'react';
import useEqualStateFactory from '@jsxtools/use-equal-state-factory';

const useEqualState = useEqualStateFactory({ useState });

function Component () {
  // shallow updates to formData will not trigger re-renders
  const [formData, setFormData] = useEqualState({ givenName: 'Jonathan', familyName: 'Neal' });
  const onGivenNameInput = event => setFormData({ ...formData, givenName: event.target.value });
  const onFamilyNameInput = event => setFormData({ ...formData, familyName: event.target.value });

  return (
    <>
      <p>
        <label htmlFor="gn">Given Name</label>
        <input id="gn" defaultValue={formData.givenName} onInput={onGivenNameInput} />
      </p>
      <p>
        <label htmlFor="fn">Family Name</label>
        <input id="fn" defaultValue={formData.familyName} onInput={onFamilyNameInput} />
      </p>
    </>
  );
}
```

[hook]: https://reactjs.org/docs/hooks-reference.html
[frontend]: https://github.com/jsxtools/frontend
npm package: @jsxtools/use-fetch-factory
Description: generates a hook that provides the state and settled response of a fetch request
Author: Jonathan Neal
Latest version: 1.1.5

# use-fetch-factory [<img src="https://avatars.githubusercontent.com/u/52989093" alt="" width="90" height="90" align="right">][frontend]

[<img alt="npm version" src="https://img.shields.io/npm/v/@jsxtools/use-fetch-factory.svg" height="20">](https://www.npmjs.com/package/@jsxtools/use-fetch-factory)
[<img alt="build status" src="https://img.shields.io/travis/jsxtools/frontend/master.svg" height="20">](https://travis-ci.org/github/jsxtools/frontend)
[<img alt="issue tracker" src="https://img.shields.io/github/issues/jsxtools/frontend/use-fetch-factory.svg" height="20">](https://github.com/jsxtools/frontend/issues?q=is:issue+is:open+label:use-fetch-factory)
[<img alt="pull requests" src="https://img.shields.io/github/issues-pr/jsxtools/frontend/use-fetch-factory.svg" height="20">](https://github.com/jsxtools/frontend/pulls?q=is:pr+is:open+label:use-fetch-factory)

**use-fetch-factory** generates a [hook] that provides the state and settled response of a [fetch].

It is <strong size>597 bytes (351 gzipped)</strong>.

## Installation

```sh
npm install @jsxtools/use-fetch-factory
```

## Usage

```js
import { useEffect, useRef, useState } from 'react';
import useFetchFactory from '@jsxtools/use-fetch-factory';

const useFetch = useFetchFactory({ useEffect, useRef, useState });

function Component () {
  // the `state` is "pending", "fulfilled", or "rejected"
  // the `response` is the response from the fetch
  const [ state, response ] = useFetch('https://httpbin.org/get');

  return state === 'pending'
    ? 'Loading'
  : JSON.stringify(settledValue);
}
```

### Abort

```js
const [ state, response, abort ] = useFetch('https://httpbin.org/get');

// abort the fetch
abort();
```

### Timeout

```js
// abort the fetch after 2000ms
const [ state, response ] = useFetch('https://httpbin.org/get', {
  timeout: 2000
});
```

[fetch]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
[frontend]: https://github.com/jsxtools/frontend
npm package: @jsxtools/use-local-storage-factory
Description: Returns a hook that provides a state and setter bound to Local Storage.
Author: Jonathan Neal
Latest version: 1.0.5

# use-local-storage-factory [<img src="https://avatars.githubusercontent.com/u/52989093" alt="" width="90" height="90" align="right">][frontend]

[<img alt="npm version" src="https://img.shields.io/npm/v/@jsxtools/use-local-storage-factory.svg" height="20">](https://www.npmjs.com/package/@jsxtools/use-local-storage-factory)
[<img alt="build status" src="https://img.shields.io/travis/jsxtools/frontend/master.svg" height="20">](https://travis-ci.org/github/jsxtools/frontend)
[<img alt="issue tracker" src="https://img.shields.io/github/issues/jsxtools/frontend/use-local-storage-factory.svg" height="20">](https://github.com/jsxtools/frontend/issues?q=is:issue+is:open+label:use-local-storage-factory)
[<img alt="pull requests" src="https://img.shields.io/github/issues-pr/jsxtools/frontend/use-local-storage-factory.svg" height="20">](https://github.com/jsxtools/frontend/pulls?q=is:pr+is:open+label:use-local-storage-factory)

**use-local-storage-factory** returns a [hook] that provides a state and setter bound to [Local Storage].

It is <strong size>363 bytes (214 gzipped)</strong>.

## Installation

```sh
npm install @jsxtools/use-local-storage-factory
```

## Usage

```js
import { useState } from 'react';
import useLocalStorageFactory from '@jsxtools/use-local-storage-factory';

const useLocalStorage = useEqualStateFactory({ useState });

function Component() {
  // the `value` of `counter` will persist after the browser is refreshed
  const [value, setValue] = useLocalStorage('counter', 0);
  const inc = setValue.bind(null, value + 1);
  const dec = setValue.bind(null, value - 1);

  return (
    <p>
      <span>Value is "{value}".</span>
      <button aria-label="decrement value" onClick={dec}>-</button>
      <button aria-label="increment value" onClick={inc}>+</button>
    </p>
  );
}
```

[hook]: https://reactjs.org/docs/hooks-reference.html
[local storage]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
[frontend]: https://github.com/jsxtools/frontend
npm package: @jsxtools/use-promise-factory
Description: Returns a hook that provides a state and settled value of a Promise.
Author: Jonathan Neal
Latest version: 1.0.5

# use-promise-factory [<img src="https://avatars.githubusercontent.com/u/52989093" alt="" width="90" height="90" align="right">][frontend]

[<img alt="npm version" src="https://img.shields.io/npm/v/@jsxtools/use-promise-factory.svg" height="20">](https://www.npmjs.com/package/@jsxtools/use-promise-factory)
[<img alt="build status" src="https://img.shields.io/travis/jsxtools/frontend/master.svg" height="20">](https://travis-ci.org/github/jsxtools/frontend)
[<img alt="issue tracker" src="https://img.shields.io/github/issues/jsxtools/frontend/use-promise-factory.svg" height="20">](https://github.com/jsxtools/frontend/issues?q=is:issue+is:open+label:use-promise-factory)
[<img alt="pull requests" src="https://img.shields.io/github/issues-pr/jsxtools/frontend/use-promise-factory.svg" height="20">](https://github.com/jsxtools/frontend/pulls?q=is:pr+is:open+label:use-promise-factory)

**use-promise-factory** generates a [hook] that provides a state and settled value of a [Promise].

It is <strong size>451 bytes (268 gzipped)</strong>.

## Installation

```sh
npm install @jsxtools/use-promise-factory
```

## Usage

```js
import { useEffect, useState } from 'react';
import usePromiseFactory from '@jsxtools/use-promise-factory';

const usePromise = usePromiseFactory({ useEffect, useState });

function Component () {
  // the `state` is "pending", "fulfilled", or "rejected"
  // the `settledValue` is the fulfilled or rejected value
  const [ state, settledValue ] = usePromise(async () => {
    const response = await fetch(URL);
    const json = await response.json();

    return json;
  });

  return state === 'pending'
    ? 'Loading'
  : JSON.stringify(settledValue);
}
```

[hook]: https://reactjs.org/docs/hooks-reference.html
[frontend]: https://github.com/jsxtools/frontend
[promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises