open-index/open-npm huggingface dataset:
npm package: @jacob-hooks/use-axios
Description: React Hook to send HTTP request and get data from URL
Author: Jacob Ko
Latest version: 1.0.19

# @jacob-hooks/use-axios

React Hook to send HTTP request and get data from URL

# install

- yarn

`$ yarn add @jacob-hooks/use-axios`

- npm

`$ npm i @jacob-hooks/use-axios `

# Usage

```js
import useAxios from "@jacob-hooks/use-axios";

const App = () => {
  const { loading, data, refetch } = useAxios({
    url: "https://yts.mx/api/v2/list_movies.json",
  });
  return (
    <>
      <div className="App">
        <h1>{data && data.status}</h1>
        <h2>{loading && "Loading"}</h2>
        <button onClick={refetch}>Refetch</button>
      </div>
    </>
  );
};

export default App;
```
npm package: @jacob-hooks/use-before-leave
Description: React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.
Author: Jacob Ko
Latest version: 1.0.7

# @jacob-hooks/use-before-leave

React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.

## installation

### yarn

`yarn add @jacob-hooks/use-before-leave`

### npm

`npm i @jacob-hooks/use-before-leave`

## Usage

```js
import React from "react";
import useBeforeLeave from "@jacob-hooks/use-before-leave";

function App() {
  const beforeLeave = () => console.log("User is leaving...");
  useBeforeLeave(beforeLeave);
  return <h1>Hello Nooks</h1>;
}
```

### Arguments

| Argument    | Type   | Description                                                              | Required |
| ----------- | ------ | ------------------------------------------------------------------------ | -------- |
| beforeLeave | string | When the mouse leaves the page. Useful to show a popup or for analytics. | yes      |
npm package: @jacob-hooks/use-click
Description: React Hook to execute a function when the mouse click then add event listener
Author: Jacob Ko
Latest version: 1.0.3

# @jacob-hooks/use-click

React Hook to execute a function when the mouse click then add event listener

## installation

### yarn

`yarn add @jacob-hooks/use-click`

### npm

`npm i @jacob-hooks/use-click`

## Usage

```js
import React from "react";
import useClick from "@jacob-hooks/use-click";

const App = () => {
  const sayHello = () => console.log("Say Hello");

  const title = useClick(sayHello);

  return (
    <div className="App">
      <h1 ref={title}>Hello</h1>
    </div>
  );
};
```

### Arguments

| Argument | Type   | Description                           | Required |
| -------- | ------ | ------------------------------------- | -------- |
| click    | string | The mouse click then add event lister | yes      |
npm package: @jacob-hooks/use-confirm
Description: React Hook to ask the user for a confirmation before executing a function.
Author: Jacob Ko
Latest version: 1.0.13

# @jacob-hooks/use-confirm

React Hook to ask the user for a confirmation before executing a function.

## installation

### yarn

`yarn add @jacob-hooks/use-confirm`

### npm

`npm i @jacob-hooks/use-confirm`

## Usage

```js
import React from "react";
import useConfirm from "@jacob-hooks/use-confirm";

function App() {
  const deleteWorld = () => console.log("Deleting world...");
  const confirmDelete = useConfirm("Are you sure?", deleteWorld);
  return <button onClick={confirmDelete}>Delete the world</button>;
}
```

### Arguments

| Argument | Type     | Description                                                     | Required |
| -------- | -------- | --------------------------------------------------------------- | -------- |
| confirm  | function | To ask the user for a confirmation before executing a function. | yes      |
npm package: @jacob-hooks/use-fade-in
Description: React Hook to fade in any element.
Author: Jacob Ko
Latest version: 1.0.12

# @jacob-hooks/use-fade-in

React Hook to fade in any element.

## installation

### yarn

`yarn add @jacob-hooks/use-fade-in`

### npm

`npm i @jacob-hooks/use-fade-in`

## Usage

```js
import React from "react";
import useFadeIn from "@jacob-hooks/use-fade-in";

function App() {
  const fadeIn = useFadeIn(5, 10);
  return <h1 {...fadeIn}>This will fade in.</h1>;
}
```

### Arguments

| Argument | Type   | Description                                     | Required | Default value |
| -------- | ------ | ----------------------------------------------- | -------- | ------------- |
| duration | number | Sets the duration of the transition. In seconds | no       | 1             |
| delay    | number | Delays of transition's start. In seconds        | no       | 0             |

### Return

`useScroll` returns an object containing the following:

| Name  | Type      | Description                                                               |
| ----- | --------- | ------------------------------------------------------------------------- |
| ref   | React Ref | A ref created to fadeIn the element                                       |
| style | Object    | Style object containing `{opacity:0}` to give to the element as a default |

It's recommended to just spread the returned object on the element as shown in the Usage section above.
npm package: @jacob-hooks/use-hover
Description: React Hook to detect a hover on an any React Element
Author: Jacob Ko
Latest version: 1.0.11

# @jacob-hooks/use-hover

React Hook to detect a hover on an any React Element

## installation

### yarn

`yarn add @jacob-hooks/use-hover`

### npm

`npm i @jacob-hooks/use-hover`

## Usage

```js
import React from "react";
import useHover from "@jacob-hooks/use-hover";

function App() {
  const onHover = () => console.log("Somebody hovered!");
  const markedRef = useClick(onHover);
  return <h1 ref={markedRef}>Hello Nooks</h1>;
}
```

### Arguments

| Argument | Type     | Description                                       | Required |
| -------- | -------- | ------------------------------------------------- | -------- |
| onHover  | function | Function to be called when the element is hovered | yes      |

### Return

| Return value | Type      | Description                                                     | Default value |
| ------------ | --------- | --------------------------------------------------------------- | ------------- |
| ref          | React Ref | A React Ref listening to the hover event, add it to any element | null          |
npm package: @jacob-hooks/use-input
Description: React Hook to update input event
Author: Jacob Ko
Latest version: 1.0.10

# @jacob-hooks/use-input

React Hook to update input event

## installation

### yarn

`yarn add @jacob-hooks/use-input`

### npm

`npm i @jacob-hooks/use-input`

## Usage

```js
import React from "react";
import useInput from "@jacob-hooks/use-input";

const App = () => {
  const maxLen = (value) => value.length <= 10;
  const name = useInput("Mr.", maxLen);

  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
    </div>
  );
};
```

### Arguments

| Argument     | Type     | Description  | Required |
| ------------ | -------- | ------------ | -------- |
| initialValue | string   | InitialValue | yes      |
| validator    | function | Name Value   | null     |
npm package: @jacob-hooks/use-network
Description: React Hook to listen when the user goes online or offline.
Author: Jacob Ko
Latest version: 1.0.16

# @jacob-hooks/use-network

React Hook to listen when the user goes online or offline.

## installation

### yarn

`yarn add @jacob-hooks/use-network`

### npm

`npm i @jacob-hooks/use-network`

## Usage

```js
import React from "react";
import useNetwork from "@jacob-hooks/use-network";

function App() {
  const onNetworkChange = (isOnline) =>
    console.log(isOnline ? "We are back online" : "We just got offline");
  const isOnline = useNetwork(onNetworkChange);
  return <h1>{isOnline ? "We are online" : "We are offline"}</h1>;
}
```

### Arguments

| Argument        | Type     | Description                                           | Arguments          | Required |
| --------------- | -------- | ----------------------------------------------------- | ------------------ | -------- |
| onNetworkChange | function | Function to be called when the network status changes | isOnline : Boolean | no       |

### Return

| Return value | Type    | Description                                         | Default value |
| ------------ | ------- | --------------------------------------------------- | ------------- |
| isOnline     | Boolean | A boolean representing if the user is online or not | true          |
npm package: @jacob-hooks/use-prevent-leave
Description: React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.
Author: Jacob Ko
Latest version: 1.0.15

# @jacob-hooks/use-prevent-leave

React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.

## installation

### yarn

`yarn add @jacob-hooks/use-prevent-leave`

### npm

`npm i @jacob-hooks/use-prevent-leave`

## Usage

```js
import React from "react";
import usePreventLeave from "@jacob-hooks/use-prevent-leave";

function App() {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  const saveChanges = async () => {
    enablePrevent();
    await sendToApi();
    disablePrevent();
  };
  return <button onClick={saveChanges}>Save changes</button>;
}
```

### Return

| Return value | Type   | Description                                                                                                                     |
| ------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------- |
| Functions    | Object | A object containing functions `enablePrevent` and `disablePrevent`, use this functions to enable/disable the leaving prevention |
npm package: @jacob-hooks/use-scroll
Description: React Hook to get X/Y coordinates of current position of the scroll.
Author: Jacob Ko
Latest version: 1.0.17

# @jacob-hooks/use-scroll

React Hook to get X/Y coordinates of current position of the scroll.

## installation

### yarn

`yarn add @jacob-hooks/use-scroll`

### npm

`npm i @jacob-hooks/use-scroll`

## Usage

```js
import React from "react";
import useScroll from "@jacob-hooks/use-scroll";

function App() {
  const { x, y } = useScroll();
  return (
    <h1>
      We are in: {x} / {y}
    </h1>
  );
}
```

### Return

| Return value | Type   | Description                                                             | Default value |
| ------------ | ------ | ----------------------------------------------------------------------- | ------------- |
| Coords       | Object | An object containing the x/y coordinates of the current scroll position | `{x:0, y:0}`  |
npm package: @jacob-hooks/use-title
Description: React Hook to update your document's title.
Author: Jacob Ko
Latest version: 1.0.18

# @jacob-hooks/use-title

React Hook to update your document's title.

## installation

### yarn

`yarn add @jacob-hooks/use-title`

### npm

`npm i @jacob-hooks/use-title`

## Usage

```js
import React from "react";
import useTitle from "@jacob-hooks/use-title";

function App() {
  useTitle("Welcome");
  return <h1>Welcome</h1>;
}
```

### Arguments

| Argument | Type   | Description                                | Required |
| -------- | ------ | ------------------------------------------ | -------- |
| title    | string | The title you want to use on your document | yes      |