open-index/open-npm huggingface dataset:
npm package: @guoyunhe/unique-selector
Description: Compute shortest unique selector for any DOM element in document
Author: Guo Yunhe
Latest version: 1.0.0

# @guoyunhe/unique-selector

Compute shortest unique selector for any DOM element in document

> Forked from [@cypress/unique-selector](https://www.npmjs.com/package/@cypress/unique-selector), which unluckily doesn't support ESM

## Installation

```bash
npm i -S @guoyunhe/unique-selector
```

## Usage

```js
import unique from '@guoyunhe/unique-selector';

const button1 = document.createElement('button');
button1.classList.add('btn');
document.body.append(button1);
const button2 = document.createElement('a');
button2.classList.add('btn');
document.body.append(button2);
const link = document.createElement('a');
document.body.append(link);

unique(button1); // button
unique(button2); // a.btn
unique(link); // a:nth-child(3)
```
npm package: @guoyunhe/use-latest-callback
Description: React hook to provide stable reference to latest callback function
Author: Guo Yunhe
Latest version: 1.0.0

# @guoyunhe/use-latest-callback

React hook to provide stable reference to latest callback function

## Installation

```bash
npm install --save @guoyunhe/use-latest-callback
```

## Examples

```js
import { useEffect, useRef, useState } from 'react';
import { useLatestCallback } from '@guoyunhe/use-latest-callback';

function List({ search }) {
  const [data, setData] = useState();

  const reload = useLatestCallback(() => {
    fetch('foobar?search=' + search)
      .then((res) => res.json())
      .then((res) => setData(res));
  });

  // When search change, useEffect will NOT run because dependencies didn't change
  useEffect(() => {
    const interval = setInterval(() => reload(), 3000);
    return () => {
      clearInterval(interval);
    };
  }, [reload]);
}
```

Compared with traditional useCallback:

```js
import { useCallback, useEffect, useRef, useState } from 'react';

function List({ search }) {
  const [data, setData] = useState();

  const reload = useCallback(() => {
    fetch('foobar?search=' + search)
      .then((res) => res.json())
      .then((res) => setData(res));
  }, [search]);

  // When search change, useEffect will run because dependencies changed
  useEffect(() => {
    const interval = setInterval(() => reload(), 3000);
    return () => {
      clearInterval(interval);
    };
  }, [reload]);
}
```
npm package: @guoyunhe/use-latest-ref
Description: React hook to provide stable reference to latest props, state, options, etc.
Author: Guo Yunhe
Latest version: 1.0.0

# use-latest-ref

React hook to provide stable reference to latest props, state, options, etc.

## Installation

```bash
npm i -S @guoyunhe/use-latest-ref
```

### Usage

```js
function Foobar(props) {
  const propsRef = useLatestRef(props);

  // you don't need to put props.foobar into dependencies and it is always the latest value
  useEffect(() => {
    propsRef.current.foobar;
  }, []);

  // ...
}
```
npm package: @guoyunhe/use-throttle-callback
Description: Throttle callbacks for React
Author: Guo Yunhe
Latest version: 1.0.0

# @guoyunhe/use-throttle-callback

![Version](https://img.shields.io/npm/v/@guoyunhe/use-throttle-callback)
![Downloads](https://img.shields.io/npm/dw/@guoyunhe/use-throttle-callback)
![Bundle size](https://img.shields.io/bundlephobia/minzip/@guoyunhe/use-throttle-callback)

Throttle callbacks for React

## Install

```bash
npm i -S @guoyunhe/use-throttle-callback
```

## Example

Click the following button quickly!

```jsx
import { useState } from 'react';
import { useThrottleCallback } from '@guoyunhe/use-throttle-callback';

function App() {
  const [count, setCount] = useState(0);

  const add = useThrottleCallback(
    () => {
      setCount((prev) => prev + 1);
    },
    // throttle for 5 seconds
    5000,
  );

  return (
    <div>
      <button onClick={add}>Pay</button>
      <p>You have paid {count} times</p>
    </div>
  );
}
```

## API

### useThrottleCallback(callback: Function, timeout?: number): Function

#### callback: Function

Callback function

#### timeout?: number

Timeout in ms

Default: 500(ms)

## FAQ

### Why not use React state to disable buttons?

React state changes will only take effect in next render, which may take 50ms or more in worst cases.
However, the time interval between two mouse clicks can be only 20ms. This means, button disabled
state change is too late to block the second click event.

It is helpful to add disabled or loading state for better visual feedback. But keep in mind that is
not a reliable way of throttling.

### Can we use DOM operation to disable the button immediately?

Yes, but here are some problems:

1. It is not the React style of doing things.
2. `<a>` and `<div>` elements don't support `disabled`.
3. `<form onSubmit>` can be triggered by any `<input>` and `<button>` within.