open-index/open-npm huggingface dataset:
npm package: @hookplus/use-before-leave
Description: React Hook to execute a function when the mouse leaves the document
Author: yeongbba
Latest version: 1.0.1

# @hookplus/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 @hookplus/use-before-leave`

#### npm

`npm i @hookplus/use-before-leave`

## Usage

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

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

### Arguments

| Argument      | Type     | Description                                              | Required |
| ------------- | -------- | -------------------------------------------------------- | -------- |
| onBeforeLeave | function | Function to be called when the mouse leaves the document | yes      |
npm package: @hookplus/use-confirm
Description: React Hook to prompt a confirmation before executing a function
Author: yeongbba
Latest version: 1.0.1

# @hookplus/use-confirm

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

## Installation

#### yarn

`yarn add @hookplus/use-confirm`

#### npm

`npm i @hookplus/use-confirm`

## Usage

```js
import React from "react";
import useConfirm from "@hookplus/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 |
| --------- | -------- | --------------------------------------------------- | -------- |
| message   | string   | Message to show the user on the confirmation propmt | yes      |
| onConfirm | function | Function to be executed when the user confirms      | yes      |
| onCancel  | function | Function to be executed when the user cancels       | no       |

### Return

| Return value | Type     | Description                                    | Default value |
| ------------ | -------- | ---------------------------------------------- | ------------- |
| function     | function | Function wrapped around the confirmation logic | null          |
npm package: @hookplus/use-fade-in
Description: React Hook to fade in any element
Author: yeongbba
Latest version: 1.0.1

# @hookplus/use-fade-in

React Hook to fade in any element.

## Installation

#### yarn

`yarn add @hookplus/use-fade-in`

#### npm

`npm i @hookplus/use-fade-in`

## Usage

```js
import React from "react";
import useFadeIn from "@@hookplus/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: @hookplus/use-full-screen
Description: React Hook to make any element go Fullscreen
Author: yeongbba
Latest version: 1.0.0

# @hookplus/use-fullscreen

React Hook to make any element go Fullscreen

## Installation

#### yarn

`yarn add @hookplus/use-fullscreen`

#### npm

`npm i @hookplus/use-fullscreen`

## Usage

```js
import React from "react";
import useFullscreen from "@hookplus/use-fullscreen";

function App() {
  const onChange = (isFull) =>
    console.log(isFull ? "We are in Fullscreen" : "We are not in Fullscreen");
  const { element, triggerFull, exitFull } = useFullscreen(onChange);
  return (
    <div ref={element}>
      <h1>Hello</h1>
      <button onClick={triggerFull}>Make this Fullscreen</button>
      <button onClick={exitFull}>Exit Fullscreen</button>
    </div>
  );
}
```

### Arguments

| Argument | Type     | Description                                                       | Arguments        | Required |
| -------- | -------- | ----------------------------------------------------------------- | ---------------- | -------- |
| onChange | function | Function to be called when the screen goes Fullscreen or exits is | isFull : Boolean | no       |

### Return

`useFullscreen` returns an object containing the following:

| Return value | Type      | Description                                                |
| ------------ | --------- | ---------------------------------------------------------- |
| element      | React Ref | Ref to add to the element that you want to make fullscreen |
| triggerFull  | Function  | Function to make the element enter fullscreen              |
| exitFull     | Function  | Function to make the document exit fullscreen              |
npm package: @hookplus/use-hover
Description: React Hook to detect a hover on an any React Element
Author: yeongbba
Latest version: 1.0.1

# @hookplus/use-hover

React Hook to detect a hover on an any React Element

## Installation

#### yarn

`yarn add @hookplus/use-hover`

#### npm

`npm i @hookplus/use-hover`

## Usage

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

function App() {
  const onHover = () => console.log("Somebody hovered!");
  const markedRef = useClick(onHover);
  return <h1 ref={markedRef}>Hello Hookplus</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: @hookplus/use-network
Description: React Hook to listen when the user goes online or offline
Author: yeongbba
Latest version: 1.0.0

# @hookplus/use-network

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

## Installation

#### yarn

`yarn add @hookplus/use-network`

#### npm

`npm i @hookplus/use-network`

## Usage

```js
import React from "react";
import useNetwork from "@hookplus/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: @hookplus/use-prevent
Description: React Hook to prompt the user for confirmation before leaving the page
Author: yeongbba
Latest version: 1.0.0

# @hookplus/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 @hookplus/use-prevent-leave`

#### npm

`npm i @hookplus/use-prevent-leave`

## Usage

```js
import React from "react";
import usePreventLeave from "@hookplus/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: @hookplus/use-scroll
Description: React Hook to get X/Y coordinates of current position of the scroll
Author: yeongbba
Latest version: 1.0.0

# @hookplus/use-scroll

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

## Installation

#### yarn

`yarn add @hookplus/use-scroll`

#### npm

`npm i @hookplus/use-scroll`

## Usage

```js
import React from "react";
import useScroll from "@hookplus/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: @hookplus/use-title
Description: React Hook to update your document's title
Author: yeongbba
Latest version: 1.0.1

# @hookplus/use-title

React Hook to update your document's title

## Installation

#### yarn

`yarn add @hookplus/use-title`

#### npm

`npm i @hookplus/use-title`

## Usage

```js
import React from "react";
import useTitle from "@hookplus/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      |
npm package: @hooks/before-unload
Description: React hook to provide a message prompt before the page is unloaded
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/before-unload

React hook to provide a message prompt before the page is unloaded

![NPM version](https://img.shields.io/npm/v/@hooks/before-unload?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/before-unload?style=flat-square)

## Install

```bash
npm i @hooks/before-unload
```

## Usage

### useBeforeUnload

```ts
useBeforeUnload(message?: string)
```

#### Parameters

##### `message?: string`

If provided, will cause the message to be shown before the page is unloaded.
npm package: @hooks/boolean
Description: React hook to store a boolean
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/boolean

React hook to store a boolean

![NPM version](https://img.shields.io/npm/v/@hooks/boolean?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/boolean?style=flat-square)

## Install

```bash
npm i @hooks/boolean
```

## Usage

### useBoolean

```ts
useBoolean(initialValue: boolean): [boolean, (nextValue?: boolean) => void]
```

#### Parameters

##### `initialValue: boolean`

The initial state for the value.

#### Return

Returns an array containing the value and a function to update it.
npm package: @hooks/geo-location
Description: React hook to return geo location details
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/geo-location

React hook to return geo location details

![NPM version](https://img.shields.io/npm/v/@hooks/geo-location?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/geo-location?style=flat-square)

## Install

```bash
npm i @hooks/geo-location
```

## Usage

### useGeoLocation

```ts
useGeoLocation(options?: PositionOptions): [Position, PositionError]
```

#### Parameters

##### `options?: PositionOptions`

Passes PositionOptions through to the geolocation API - https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions

#### Return

Returns an array containing the position and any position error.
npm package: @hooks/interval
Description: React hook to wrap setInterval
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/interval

React hook to wrap setInterval

![NPM version](https://img.shields.io/npm/v/@hooks/interval?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/interval?style=flat-square)

## Install

```bash
npm i @hooks/interval
```

## Usage

### useInterval

```ts
useInterval(callback: Function, interval?: number | null): void
```

#### Parameters

##### `callback: Function`

Will be executed each time the `interval` elapses.

##### `interval?: number | null`

Length of time in milliseconds before the `callback` is executed. Providing `null` will clear the interval.
npm package: @hooks/media-query
Description: React hook to respond to media queries
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/media-query

React hook to respond to media queries

![NPM version](https://img.shields.io/npm/v/@hooks/media-query?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/media-query?style=flat-square)

## Install

```bash
npm i @hooks/media-query
```

## Usage

### useMediaQuery

```ts
useMediaQuery(query: string, fallback = false): boolean
```

#### Parameters

##### `query: string`

A string representing the media query to parse.

##### `fallback = false`

The initial match state, defaults to `false`.

#### Return

Returns `true` if the document currently matches the media query list, `false` if not.
npm package: @hooks/mount
Description: React hook to execute callback on component mount
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/mount

React hook to execute callback on component mount

![NPM version](https://img.shields.io/npm/v/@hooks/mount?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/mount?style=flat-square)

## Install

```bash
npm i @hooks/mount
```

## Usage

### useMount

```ts
useMount(callback: () => void, hook: (effect: EffectCallback, deps?: DependencyList) => void = useEffect)
```

#### Parameters

##### `callback: () => void`

Function to execute.

##### `hook: (effect: EffectCallback, deps?: DependencyList) => void = useEffect`

Hook to use, defaults to useEffect.
npm package: @hooks/network-status
Description: React hook return network status details
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/network-status

React hook return network status details

![NPM version](https://img.shields.io/npm/v/@hooks/network-status?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/network-status?style=flat-square)

## Install

```bash
npm i @hooks/network-status
```

## Usage

### useNetworkStatus

```ts
useNetworkStatus(): NetworkStatus
```

#### Return

Returns an object containing details about the network status.
npm package: @hooks/previous
Description: React hook to remember a value between renders
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/previous

React hook to remember a value between renders

![NPM version](https://img.shields.io/npm/v/@hooks/previous?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/previous?style=flat-square)

## Install

```bash
npm i @hooks/previous
```

## Usage

### usePrevious

```ts
usePrevious(value: T): T
```

#### Parameters

##### `value: T`

The value to be returned on the next render.

#### Return

Returns the last value, undefined for initial render.
npm package: @hooks/queue
Description: React hook to manage a queue
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/queue

React hook to manage a queue

![NPM version](https://img.shields.io/npm/v/@hooks/queue?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/queue?style=flat-square)

## Install

```bash
npm i @hooks/queue
```

## Usage

### useQueue

```ts
useQueue(initialState: Item[] = [])
```

#### Parameters

##### `initialState: Item[] = []`

Populate the queue with an array of initial values.
npm package: @hooks/raf
Description: React hook to wrap requestAnimationFrame
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/raf

React hook to wrap requestAnimationFrame

![NPM version](https://img.shields.io/npm/v/@hooks/raf?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/raf?style=flat-square)

## Install

```bash
npm i @hooks/raf
```

## Usage

### useRaf

```ts
useRaf(callback: C, deps?: readonly D[]): void
```

#### Parameters

##### `callback: C`

Will be executed before the each repaint.

##### `deps?: readonly D[]`

An array of values that, when modified, will clear and reset the callback effect. See https://reactjs.org/docs/hooks-reference.html#uselayouteffect.
npm package: @hooks/render-count
Description: React hook to record the render count
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/render-count

React hook to record the render count

![NPM version](https://img.shields.io/npm/v/@hooks/render-count?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/render-count?style=flat-square)

## Install

```bash
npm i @hooks/render-count
```

## Usage

### useRenderCount

```ts
useRenderCount(): number
```

#### Return

Returns the number of times the hook has been called.
npm package: @hooks/stack
Description: React hook to manage a stack
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/stack

React hook to manage a stack

![NPM version](https://img.shields.io/npm/v/@hooks/stack?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/stack?style=flat-square)

## Install

```bash
npm i @hooks/stack
```

## Usage

### useStack

```ts
useStack(initialState: Item[] = [])
```

#### Parameters

##### `initialState: Item[] = []`

Populate the stack with an array of initial values.
npm package: @hooks/store
Description: React hook to provide an observable global store
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/store

React hook to provide an observable global store

![NPM version](https://img.shields.io/npm/v/@hooks/store?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/store?style=flat-square)

## Install

```bash
npm i @hooks/store
```

## Usage

### createStore

```ts
createStore(options: Options<State> = {})
```

#### Parameters

##### `options: Options<State> = {}`
npm package: @hooks/timeout
Description: React hook to delay function execution
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/timeout

React hook to delay function execution

![NPM version](https://img.shields.io/npm/v/@hooks/timeout?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/timeout?style=flat-square)

## Install

```bash
npm i @hooks/timeout
```

## Usage

### useTimeout

```ts
useTimeout(callback: Function, delay?: number): void
```

#### Parameters

##### `callback: Function`

Will be executed when the `delay` elapses.

##### `delay?: number`

Length of time in milliseconds before the `callback` is executed. Providing `null` will clear the timeout.
npm package: @hooks/title
Description: React hook to set the document title
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/title

React hook to set the document title

![NPM version](https://img.shields.io/npm/v/@hooks/title?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/title?style=flat-square)

## Install

```bash
npm i @hooks/title
```

## Usage

### useTitle

```ts
useTitle(title: string): void
```

#### Parameters

##### `title: string`

Will be used to set the document title.
npm package: @hooks/unmount
Description: React hook execute a callback on component unmount
Author: Mike Simmonds
Latest version: 0.1.0

# 🎒 @hooks/unmount

React hook execute a callback on component unmount

![NPM version](https://img.shields.io/npm/v/@hooks/unmount?style=flat-square)
![Travis](https://img.shields.io/travis/com/simmo/hooks?style=flat-square)
![License](https://img.shields.io/npm/l/@hooks/unmount?style=flat-square)

## Install

```bash
npm i @hooks/unmount
```

## Usage

### useUnmount

```ts
useUnmount(callback: () => void, hook: (effect: EffectCallback, deps?: DependencyList) => void = useEffect)
```

#### Parameters

##### `callback: () => void`

Function to execute.

##### `hook: (effect: EffectCallback, deps?: DependencyList) => void = useEffect`

Hook to use, defaults to useEffect.
npm package: @hooks2022/use-axios
Description: React Hook to execute a function using Axios, an HTTP asynchronous communication library.
Latest version: 1.0.0

# @hooks2022/use-axios

React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.

## Installation

#### yarn

`yarn add @hooks2022/use-axios`

#### npm

`npm i @hooks2022/use-axios`

## Usage

```js
import React from "react";
import useBeforeLeave from "@hooks2022/use-axios";

function App() {
  const {loading, data, error, refetch}=useAxios(){
      url:"https://..."
  }
  console.log(`Loading: ${loading}\n Error: ${error}\n Data: ${JSON.stringfy(data)}`)
  return (
      <h1>{data && data.status}</h1>
      <h2>{loading && "Loading"}</h2>
      <button onClick={refetch}>Refetch</button>
  );

}
```
npm package: @hooks2022/use-before-leave
Description: React Hook to execute a function when the mouse leaves the page. Useful to show a popup or for analytics.
Latest version: 1.0.0

# @hooks2022/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 @hooks2022/use-before-leave`

#### npm

`npm i @hooks2022/use-before-leave`

## Usage

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

function App() {
  const beforeLeave = () => console.log("User is leaving...");
  useBeforeLeave(beforeLeave);
  return <h1>Hello Nooks</h1>;
}
```
npm package: @hooks2022/use-confirm
Description: React Hook to ask the user for a confirmation before executing a function.
Latest version: 1.0.0

# @hooks2022/use-confirm

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

## Installation

#### yarn

`yarn add @hooks2022/use-confirm`

#### npm

`npm i @hooks2022/use-confirm`

## Usage

```js
import React from "react";
import useConfirm from "@hooks2022/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>;
}
```
npm package: @hooks2022/use-fade-in
Description: React Hook to fade in any element
Latest version: 1.0.0

# @hooks2022/use-fade-in

React Hook to fade in any element.

## Installation

#### yarn

`yarn add @hooks2022/use-fade-in`

#### npm

`npm i @hooks2022/use-fade-in`

## Usage

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

function App() {
  const fadeIn = useFadeIn(5, 10);
  return <h1 {...fadeIn}>This will fade in.</h1>;
}
```
npm package: @hooks2022/use-fullscreen
Description: React Hook to make any element go Fullscreen
Latest version: 1.0.0

# @hooks2022/use-fullscreen

React Hook to make any element go Fullscreen

## Installation

#### yarn

`yarn add @hooks2022/use-fullscreen`

#### npm

`npm i @hooks2022/use-fullscreen`

## Usage

```js
import React from "react";
import useFullscreen from "@hooks2022/use-fullscreen";

function App() {
  const onChange = (isFull) =>
    console.log(isFull ? "We are in Fullscreen" : "We are not in Fullscreen");
  const { element, triggerFull, exitFull } = useFullscreen(onChange);
  return (
    <div ref={element}>
      <h1>Hello</h1>
      <button onClick={triggerFull}>Make this Fullscreen</button>
      <button onClick={exitFull}>Exit Fullscreen</button>
    </div>
  );
}
```
npm package: @hooks2022/use-network
Description: React Hook to listen when the user goes online or offline
Latest version: 1.0.0

# @hooks2022/use-network

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

## Installation

#### yarn

`yarn add @hooks2022/use-network`

#### npm

`npm i @hooks2022/use-network`

## Usage

```js
import React from "react";
import useNetwork from "@hooks2022/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>;
}
```
npm package: @hooks2022/use-prevent-leave
Description: React Hook to prompt the user for confirmation before leaving the page. Useful when changes haven't been saved.
Latest version: 1.0.0

# @hooks2022/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 @hooks2022/use-prevent-leave`

#### npm

`npm i @hooks2022/use-prevent-leave`

## Usage

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

function App() {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  const saveChanges = async () => {
    enablePrevent();
    await sendToApi();
    disablePrevent();
  };
  return <button onClick={saveChanges}>Save changes</button>;
}
```
npm package: @hooks2022/use-scroll
Description: React Hook to get X/Y coordinates of current position of the scroll.
Latest version: 1.0.0

# @nooks/use-scroll

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

## Installation

#### yarn

`yarn add @nooks/use-scroll`

#### npm

`npm i @nooks/use-scroll`

## Usage

```js
import React from "react";
import useScroll from "@nooks/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: @hooks2022/use-title
Description: React Hook to update document's title
Latest version: 1.0.0

# @hooks2022/use-title

React Hook to update your document's title.

## Installation

#### yarn

`yarn add @hooks2022/use-title`

#### npm

`npm i @hooks2022/use-title`

## Usage

```js
import React from "react";
import useTitle from "@nooks/use-title";

function App() {
  useTitle("Welcome");
  return <h1>Welcome</h1>;
}
```
npm package: @hookstapose/use-event
Description: > TODO: description
Author: MaanuVazquez
Latest version: 1.1.0

# useEvent

This hook lets you register an event on `window` or a passed element when the component mounts on the DOM and unregister it when the component unmounts from the DOM with the same API as the `addEventListener` method

## Installation

Install with yarn:
```
yarn add @react-hook-utils/use-event
```
Install with npm:
```
npm install @react-hook-utils/use-event
```

## API

```javascript
import {useEvent} from '@react-hook-utils/use-event'

useEvent('click', () => {
    console.log('clicked')
})
```

- `event`: **(Required)** Event
- `callback`: **(Required)** Function
- `options`: Boolean | Event Options
- `element`: HTMLElement

## Usage

```javascript
import React, {useState} from 'react'
import {useEvent} from '@react-hook-utils/use-event'

function Example() {

    const [count, setCount] = useState(0)

    useEvent('click', () => {
        setCount(count + 1)
    })

    return (
        <div>{count}</div>
    )
}
```
npm package: @hookstapose/use-hover
Description: > TODO: description
Author: Beogip
Latest version: 1.1.0

# `useHover`

> This hook it's used to know if a component is on hover.

## Usage

```javascript
import {useHover} from '@hookstapose/use-hover'

export default function Foo() {
  const {isHovered, eventBinders} = useHover()
  const style = {
    backgroundColor: isHovered ? 'red': 'white'
  }
  return (
      <p {...eventBinders} style={style}>
        Show some message
      </p>
  )
}
```
npm package: @hookstate/broadcasted
Description: Plugin for @hookstate/core to enable state synchronization across browser tabs.
Author: Andrey Konstantinov
Latest version: 4.0.0

# @hookstate/broadcasted

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/broadcasted.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/broadcasted)

Plugin for @hookstate/core to enable synchronization of a state across browser tabs.

[Learn more...](https://hookstate.js.org/docs/extensions-broadcasted)
npm package: @hookstate/clonable
Description: Plugin for @hookstate/core to define state cloning capabilities.
Author: Andrey Konstantinov
Latest version: 4.0.0

# @hookstate/clonable

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/clonable.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/clonable)

Plugin for @hookstate/core to define state cloning capabilities.

[Learn more...](https://hookstate.js.org/docs/extensions-clonable)
npm package: @hookstate/comparable
Description: Plugin for @hookstate/core to enable state values comparison.
Author: Andrey Konstantinov
Latest version: 4.0.0

# @hookstate/comparable

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/comparable.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/comparable)

Plugin for @hookstate/core to enable state values comparison.

[Learn more...](https://hookstate.js.org/docs/extensions-comparable)
npm package: @hookstate/core
Description: The flexible, fast and extendable state management for React that is based on hooks and state usage tracking.
Author: Andrey Konstantinov
Latest version: 4.0.2

<h1 align="center">
  Hookstate
</h1>

<p align="center">
  The most straightforward, extensible and incredibly fast state management that is based on React state hook.
</p>
<br/>

<p align="center">
  <a href="https://hookstate.js.org">Why?</a> •
  <a href="https://hookstate.js.org/docs/getting-started">Docs / Samples</a> •
  <a href="https://github.com/avkonst/hookstate/tree/master/docs/demos/todolist">Demo application</a> •
  <a href="https://hookstate.js.org/docs/extensions-overview">Extensions</a> •
  <a href="https://hookstate.js.org/blog/tags/releases">Release notes</a>
</p>

<p align="center">
  <a href="./">
    <img src="https://badgen.net/badge/icon/typescript/green?icon=typescript&label">
  </a>
  <a href="https://www.npmjs.com/package/@hookstate/core">
      <img src="https://badgen.net/bundlephobia/minzip/@hookstate/core?label=size&color=green" />
  </a>
  <a href="https://www.npmjs.com/package/@hookstate/core">
    <img src="https://badgen.net/badge/dependencies/none/green" />
  </a>
  <a href="./LICENSE">
    <img src="https://badgen.net/github/license/avkonst/hookstate?color=green" />
  </a>
  <a href="https://travis-ci.com/avkonst/hookstate">
    <img src="https://travis-ci.com/avkonst/hookstate.svg?branch=master" />
  </a>
  <a href="https://codecov.io/gh/avkonst/hookstate">
    <img src="https://codecov.io/gh/avkonst/hookstate/branch/master/graph/badge.svg" />
  </a>
  <a href="https://www.npmjs.com/package/@hookstate/core">
    <img src="https://img.shields.io/npm/v/@hookstate/core.svg?maxAge=300&label=version&colorB=007ec6" />
  </a>
</p>

## Support

**Any questions? Just ask by raising a github ticket.**
npm package: @hookstate/devtools
Description: Development tools plugin for @hookstate/core.
Author: Andrey Konstantinov
Latest version: 4.0.3

# @hookstate/devtools

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/devtools.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/devtools)

Development tools for @hookstate/core.

[Learn more...](https://hookstate.js.org/docs/devtools)
npm package: @hookstate/identifiable
Description: Plugin for @hookstate/core to enable state labeling and identification by name.
Author: Andrey Konstantinov
Latest version: 4.0.0

# @hookstate/identifiable

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/identifiable.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/identifiable)

Plugin for @hookstate/core to enable state labeling and identification by name.

[Learn more...](https://hookstate.js.org/docs/extensions-identifiable)
npm package: @hookstate/initial
Description: Plugin for @hookstate/core to enable access to initial state value and to modified status.
Author: Andrey Konstantinov
Latest version: 3.0.1

# @hookstate/initial

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/initial.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/initial)

Plugin for @hookstate/core to enable access to initial state value and to modified status.

[Learn more...](https://hookstate.js.org/docs/extensions-initial)
npm package: @hookstate/initializable
Description: Plugin for @hookstate/core to enable one off initialization callback.
Author: Andrey Konstantinov
Latest version: 4.0.0

# @hookstate/initializable

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/initializable.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/initializable)

Plugin for @hookstate/core to enable one off initialization callback.

[Learn more...](https://hookstate.js.org/docs/extensions-initializable)
npm package: @hookstate/labelled
Description: Plugin for @hookstate/core, which allows to assign a label / name / alias for a state.
Author: Andrey Konstantinov
Latest version: 3.0.1

# @hookstate/labelled

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/labelled.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/labelled)

Plugin for @hookstate/core, which allows to assign a label / name / alias for a state.

[Learn more...](https://hookstate.js.org/docs/extensions-labelled)
npm package: @hookstate/localstored
Description: Plugin for @hookstate/core to enable persistence of managed data states to browser's local storage.
Author: Andrey Konstantinov
Latest version: 4.0.2

# @hookstate/localstored

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/localstored.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/localstored)

Plugin for @hookstate/core to enable persistence of managed data states to browser's local storage.

[Learn more...](https://hookstate.js.org/docs/extensions-localstored)
npm package: @hookstate/logged
Description: Plugin for @hookstate/core to enable logging into console when state is created/updated/destroyed.
Author: Andrey Konstantinov
Latest version: 4.0.0

# @hookstate/localstored

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/logged.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/logged)

Plugin for @hookstate/core to enable logging into console when state is created/updated/destroyed.

[Learn more...](https://hookstate.js.org/docs/extensions-logged)
npm package: @hookstate/logger
Description: Plugin for @hookstate/core to enable logging.
Author: Andrey Konstantinov
Latest version: 3.0.1

# @hookstate/logger

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/logger.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/logger)

Plugin for @hookstate/core to enable logging.

[Learn more...](https://hookstate.js.org/docs/extensions-overview)
npm package: @hookstate/mutate
Description: Plugin for @hookstate/core to add mutate actions specific for arrays, objects, strings and numbers.
Author: Andrey Konstantinov
Latest version: 1.2.3

# @hookstate/mutate

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/mutate.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/mutate)


Plugin for @hookstate/core to add mutate actions specific for arrays, objects, strings and numbers. See [demo](https://hookstate.js.org/plugin-mutate).

## API Documentation

### Array state

There the following array mutation actions available:

- `set([...])` or `set((prevState) => [...])` sets new value of the array state. It has got the same behaviour as the second value returned from the `React.useState` function
- `merge({...})` or `merge((prevState) => ({...}))` sets new value of the array state, updating the provided elements of the array, for example:
    ```ts
    merge({
        0: 'the first element is updated',
        4: 'and the fifth too',
    })
    ```
    Note: `prevState` variable in the callback is a clone/copy of the current array state
- `update(index, newElementValue)` or `update(index, (prevElementValue) => newElementValue)` sets new value of the array state, updating the element of an array by the specified index
- `concat([...])` or `concat((prevState) => [...])` sets new value of the array state, appending the provided array to the end of the current array.

    Note: `prevState` variable in the callback is a clone/copy of the current array state
- `push(newElement)` sets new value of the array state, adding new element to the end
- `pop()` sets new value of the array state, removing the last element
- `insert(indexWhereToInsert, newElement)` sets new value of the array state, inserting the new element by the specified index
- `remove(index)` sets new value of the array state, removing the element by the specified index
- `swap(index1, index2)` sets new value of the array state, swapping two elements by the specified indexes

### Object state

There the following object mutation actions available:

- `set([...])` or `set((prevState) => [...])` sets new value of the object state. It has got the same behaviour as the second value returned from the `React.useState` function
- `merge({...})` or `merge((prevState) => ({...}))` sets new value of the object state, updating the specified properties
- `update(propertyKey, newPropertyValue)` or `update(propertyKey, (prevPropertyValue) => newPropertyValue)` sets new value of the object state, updating the specified property
npm package: @hookstate/persistence
Description: Plugin for @hookstate/core to enable persistence of managed data states to browser's local storage.
Author: Andrey Konstantinov
Latest version: 3.0.1

# @hookstate/persistence

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/persistence.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/persistence)

Plugin for @hookstate/core to enable persistence of managed data states to browser's local storage.

[Learn more...](https://hookstate.js.org/docs/extensions-persistence)
npm package: @hookstate/prerender
Description: Plugin for @hookstate/core to enable optimized rerendering of transformed data state.
Author: Andrey Konstantinov
Latest version: 0.10.2
Deprecated: The functionality of this package has been moved to @hookstate/core

# @hookstate/prerender

[![npm version](https://badge.fury.io/js/%40hookstate%2Fprerender.svg)](https://badge.fury.io/js/%40hookstate%2Fprerender) [![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate)

Plugin for @hookstate/core to enable optimized rerendering of transformed data state.
npm package: @hookstate/proxy-polyfill
Description: Plugin for @hookstate/core to enable the library to work in older browsers, for example IE11.
Author: Andrey Konstantinov
Latest version: 1.2.3

# @hookstate/persistence

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/proxy-polyfill.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/proxy-polyfill)

Plugin for @hookstate/core to enable the library to work in older browsers, for example IE11. See [example project](https://github.com/avkonst/hookstate/tree/master/experimental/ie11).
npm package: @hookstate/serializable
Description: Plugin for @hookstate/core to enable state serialization and deserialization.
Author: Andrey Konstantinov
Latest version: 4.0.0

# @hookstate/serializable

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/serializable.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/serializable)

Plugin for @hookstate/core to enable state serialization and deserialization.

[Learn more...](https://hookstate.js.org/docs/extensions-serializable)
npm package: @hookstate/snapshotable
Description: Extension for @hookstate/core to enable state snapshoting and reverting to the snapshoted / previous values.
Author: Andrey Konstantinov
Latest version: 4.0.0

# @hookstate/snapshotable

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/snapshotable.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/snapshotable)

Plugin for @hookstate/core to enable access to initial state value and to modified status.

[Learn more...](https://hookstate.js.org/docs/extensions-snapshotable)
npm package: @hookstate/subscribable
Description: Plugin for @hookstate/core to make it easier to subscribe a custom callback to state changes.
Author: Andrey Konstantinov
Latest version: 4.0.0

# @hookstate/localstored

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/subscribable.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/subscribable)

Plugin for @hookstate/core to make it easier to subscribe a custom callback to state changes.

[Learn more...](https://hookstate.js.org/docs/extensions-subscribable)
npm package: @hookstate/touched
Description: Plugin for @hookstate/core to enable tracking of touched data (form) fields.
Author: Andrey Konstantinov
Latest version: 3.0.1

# @hookstate/touched

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/touched.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/touched)

Plugin for @hookstate/core to enable tracking of touched data (form) fields.

[Learn more...](https://hookstate.js.org/docs/extensions-touched)
npm package: @hookstate/untracked
Description: Plugin for @hookstate/core to enable access to untracked State get/set operations.
Author: Andrey Konstantinov
Latest version: 3.0.1

# @hookstate/untracked

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/untracked.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/untracked)

Plugin for @hookstate/core to enable managed rendering.

[Learn more...](https://hookstate.js.org/docs/performance-managed-rendering#untracked-plugin)
npm package: @hookstate/validation
Description: Plugin for @hookstate/core to enable validation of data state.
Author: Andrey Konstantinov
Latest version: 4.0.1

# @hookstate/validation

[![license](https://img.shields.io/github/license/avkonst/hookstate)](https://img.shields.io/github/license/avkonst/hookstate) [![npm version](https://img.shields.io/npm/v/@hookstate/validation.svg?maxAge=300&label=version&colorB=007ec6)](https://www.npmjs.com/package/@hookstate/validation)

Plugin for @hookstate/core to enable validation of data state.

[Learn more...](https://hookstate.js.org/docs/extensions-validation)