open-index/open-npm huggingface dataset:
npm package: @r-hook/use-draw-paths
Description: Draw paths that connect DOM nodes.
Author: kosciolek
Latest version: 1.0.9

```tsx
  const [setRoot, addElement, paths] = useDrawPaths<"c1" | "c2" | "c3" | "c4">([
    ({ c1, c2 }, drawer) => {
      drawer.start(c1.x + c1.width / 2, c1.y + c1.height + 15).bezier({
        endY: c2.y - 15,
        endX: c2.x + c2.width / 2,
        ctrlOffsetStartY: 80,
        ctrlOffsetEndY: -80
      });
    },
    ({ c2, c3, c4 }, drawer) => {
      drawer
        .start(c2.x + c2.width + 10, c2.y + c2.height / 2)
        .bezier({
          endX: c3.x + c3.width / 2,
          endY: c3.y - 10,
          ctrlOffsetStartY: 80,
          ctrlOffsetEndY: -80
        })
        .smoothBezier(c4.left + c4.width / 2, c4.y);
    }
  ]);

<Card ref={addElement("c1")}></Card>
<Card ref={addElement("c2")}></Card>
<Card ref={addElement("c3")}></Card>
<Card ref={addElement("c4")}></Card>
```

![](https://i.imgur.com/XG0kiur.png)
npm package: @r-hook/use-mouse-leave
Description: Get notified when the mouse leaves a certain area.
Author: kosciolek
Latest version: 1.0.12

# use-mouse-leave

Be notified when the mouse leaves an area.

```tsx
import { useMouseAway } from "@r-rook/use-mouse-away";

const addIgnored = useMouseAway((e) => console.log("Area left!"));

<div>
  <div ref={addIgnored(1)}></div>
  <div ref={addIgnored(123)}></div>
  <div ref={addIgnored("another-id")}></div>
</div>;
```
npm package: @r-hooks/use-axios
Description: react hook for using axios.
Author: kimeudd
Latest version: 1.1.0

# @r-hooks/use-axios
[![npm version][npm-version-image]][npm-url]

react hook for using axios.

* [Installation](#installation)
* [Usage](#usage)
 

## Installation
#### npm
```bash
npm install @r-hooks/use-axios
```


## Usage
### `useAxios(options[, axiosinstance])`
```js
import useAxios from "@r-hooks/use-axios";

function App() {
    const options = {
        url:"/api/get/1"
    }
    const { loading, data, error, refetch } = useAxios(options);
    const hanlerWithAnotherOption = ()=>{
        const option = {
            url:"/api/get/2"
        }
        refetch(option);
    }
    return (
        <div>
            <h1>UseAxios</h1>
            <h2>{data?.status}</h2>
            <h3>{loading && "Loading..."}</h3>
            <button onClick={refetch}>refetch with same option</button>
            <button onClick={hanlerWithAnotherOption}>refetch with another option</button>
        </div>
    );
}
```

[npm-url]: https://npmjs.org/package/@r-hooks/use-axios
[npm-version-image]: https://img.shields.io/npm/v/@r-hooks/use-axios.svg
npm package: @r-hooks/use-input
Description: react hook for using input.
Author: kimeudd
Latest version: 1.0.4

# @r-hooks/use-input
[![npm version][npm-version-image]][npm-url]

react hook for input.

* [Installation](#installation)
* [Usage](#usage)
* [My Other hooks](#Hooklist)
 
## Installation
#### npm
```bash
npm install @r-hooks/use-input
```

## Usage
### `useInput(initialValue[, validator])`
```js
import useInput from "@r-hooks/use-input";

function App() {
    const input = useInput("hello world");
    return (
        <div>
            <h1>UseInput</h1>
            <input type="text" {...input} />
        </div>
    );
}
```

## Hooklist
* [use-axios](https://www.npmjs.com/package/@r-hooks/use-axios "use-axios")
* [use-input](https://www.npmjs.com/package/@r-hooks/use-input "use-input")

[npm-url]: https://npmjs.org/package/@r-hooks/use-input
[npm-version-image]: https://img.shields.io/npm/v/@r-hooks/use-input.svg