open-index/open-npm huggingface dataset:
npm package: @react-guy/composer
Description: An event-driven approach to handle components state
Author: Andrei Samuilik
Latest version: 0.0.4

<img align="left" style="margin: 6px" src="https://raw.githubusercontent.com/AgentCoop/react-guy-composer/master/docs/logo-peter-griffin.png" height="120" alt='React Guy Composer Logo' aria-label='' />

**React-Guy-Composer** is a library that allows you to manage state of your components using an event-driven approach.
Handle form data, and change state of nested components in an easy and predictable way.
<br><br><br>

## Overview
Every frontend developer is familiar with the HTML5 event model, every one of us heard of such things like _event
bubbling_, _event listeners_, _target element_ and so on. Fire an event, and it will propagate through the DOM hierarchy,
from the target element all the way up to the root one (in the case of event bubbling).

On the other hand, a React application is a hierarchy of React components. So, the idea behind the library is very
simple: having a hierarchy of components (the component tree), dispatch an event to the target component and propagate
it throught components in the component tree. And because any of the components may have event listeners, you can
easily change the state of the target component during the event propagation.
npm package: @react-hangar/antd-components
Description: We developed a library of modified Antd and React Components.
Author: Andre Hanel
Latest version: 0.8.0

# Antd Components

We developed a library of modified Antd and React Components.

![logo](https://anh4n.github.io/antd-components/images/fusion.png)

## Installation

    npm install @react-hangar/antd-components

## Import Styles

    import '@react-hangar/antd-components/dist/antd.css';
    import '@react-hangar/antd-components/dist/antd-components.css';

**Important: You don´t need to import antd styles anymore.**

Available variations: `antd.css` `antd-red.css` `antd-blue.css` `antd-pink.css` `antd-mint.css`

## Docs

[https://anh4n.github.io/antd-components/](https://anh4n.github.io/antd-components/)
npm package: @react-hero/modal
Description: React component.
Author: varHarrie
Latest version: 0.1.0-alpha.0

# `@react-hero/modal`

> Modal util based on react hooks.

## Installation

```bash
npm install @react-hero/modal --save
# Or
yarn add @react-hero/modal
```

## Basic Usage

Put `ModalProvider` on your root component:

```javascript
function App() {
  return (
    <ModalProvider>
      <DemoView />
    </ModalProvider>
  )
}
```

Get `visible`, `show()` and `hide()` by `useModal`.

```javascript
function DemoView() {
  const { visible, show, hide } = useModal(MyModal)

  const onShow = React.useCallback(() => {
    show({ title: 'Modal Title' })
  }, [])

  const onHide = React.useCallback(() => {
    hide()
  }, [])

  return (
    <div>
      <span>visible: {visible.toString()}</span>
      <button onClick={onShow}>open</button>
      <button onClick={onHide}>hide</button>
    </div>
  )
}
```

Here is the modal component:

```javascript
const modalStyles = (visible) => ({
  position: 'fixed',
  top: '50%',
  left: '50%',
  padding: '30px',
  display: visible ? 'block' : 'none',
  background: '#fff',
  border: '1px solid #ddd',
  transform: 'translate(-50%, -50%)'
})

function MyModal(props: ModalProps) {
  const { visible, title, onHide } = props

  return ReactDOM.createPortal(
    <div style={modalStyles(visible)}>
      <div>{title}</div>
      <button onClick={onHide}>close</button>
    </div>,
    document.body
  )
}
```

## APIs

- `useModal(Component)` Pass into your modal component and return `visible`、`show()`、`hide()`.
- `show(payload)` Show modal, the `payload` will be treated as a `prop` of `Component`.
- `hide()` hide modal.
npm package: @react-hero/router-view
Description: React component.
Author: varHarrie
Latest version: 0.1.0

# `@react-hero/router-view`

> Route configuration component for `react-router`.

## Installation

```bash
npm install @react-hero/router-view --save
# or
yarn add @react-hero/router-view
```

## Basic Usage

```javascript
import { Router } from 'react-router'
import { RouterView } from '@react-hero/form'
import { createHashHistory } from 'history'

const history = createHashHistory()

const routes = [
  {
    path: '/home',
    component: () => <h2>Home</h2>
  },
  {
    path: '/product',
    component: () => <h2>Product</h2>
  },
  {
    path: '/about',
    component: () => <h2>About</h2>
  }
]

function App() {
  return (
    <Router history={history}>
      <div>
        <h1>App</h1>
        <RouterView routes={routes} />
      </div>
    </Router>
  )
}
```

## APIs

### Route Option

- `path` URL string.
- `component` React component.
- `exact` Whether only matches with `location.pathname` exactly.
- `redirect` Navigates to new location.
- `routes` Nested child routes.
- `payload` Pass as a prop into route component.

### Route Component Props

Includes all props from `react-router` and the following props.

- `routes` Nested child routes from route option.
- `payload` payload from route option.

### RouterView Props

- `switched` Use `Switch` as the wrapped component, default to `true`.
- `routes` Nested child routes, come from `this.props`.
- `extraProps` Pass as extra props into child routes.
npm package: @react-hive/honey-layout
Description: [![Netlify Status](https://api.netlify.com/api/v1/badges/70440ba9-8859-4873-bf85-fd2eb8a1f71c/deploy-status)](https://app.netlify.com/sites/react-honey-layout/deploys) [![Latest version](https://img.shields.io/npm/v/@react-hive/honey-layout)](https://www.
Author: Mike Aliinyk
Latest version: 16.3.0

# react-honey-layout

[![Netlify Status](https://api.netlify.com/api/v1/badges/70440ba9-8859-4873-bf85-fd2eb8a1f71c/deploy-status)](https://app.netlify.com/sites/react-honey-layout/deploys)
[![Latest version](https://img.shields.io/npm/v/@react-hive/honey-layout)](https://www.npmjs.com/package/@react-hive/honey-layout)
[![Publish status](https://github.com/React-Hive/honey-layout/actions/workflows/publish.yml/badge.svg)](https://github.com/React-Hive/honey-layout/actions/workflows/publish.yml)
[![Package size](https://img.shields.io/bundlephobia/minzip/@react-hive/honey-layout)](https://www.npmjs.com/package/@react-hive/honey-layout)
[![Downloads statistic](https://img.shields.io/npm/dm/@react-hive/honey-layout)](https://www.npmjs.com/package/@react-hive/honey-layout)
[![Commit activity](https://img.shields.io/github/commit-activity/m/React-Hive/honey-layout)](https://www.npmjs.com/package/@react-hive/honey-layout)
[![Licence](https://img.shields.io/npm/l/@react-hive/honey-layout)](https://www.npmjs.com/package/@react-hive/honey-layout)
npm package: @react-hive/honey-style
Description: [![Latest version](https://img.shields.io/npm/v/@react-hive/honey-style)](https://www.npmjs.com/package/@react-hive/honey-style) [![Publish status](https://github.com/React-Hive/honey-style/actions/workflows/publish.yml/badge.svg)](https://github.com/Reac
Author: Mike Aliinyk
Latest version: 5.4.0

# 🐝 Honey Style

[![Latest version](https://img.shields.io/npm/v/@react-hive/honey-style)](https://www.npmjs.com/package/@react-hive/honey-style)
[![Publish status](https://github.com/React-Hive/honey-style/actions/workflows/publish.yml/badge.svg)](https://github.com/React-Hive/honey-style/actions/workflows/publish.yml)
[![Package size](https://img.shields.io/bundlephobia/minzip/@react-hive/honey-style)](https://www.npmjs.com/package/@react-hive/honey-style)
[![Downloads statistic](https://img.shields.io/npm/dm/@react-hive/honey-style)](https://www.npmjs.com/package/@react-hive/honey-style)
[![Commit activity](https://img.shields.io/github/commit-activity/m/React-Hive/honey-style)](https://www.npmjs.com/package/@react-hive/honey-style)
[![Licence](https://img.shields.io/npm/l/@react-hive/honey-style)](https://www.npmjs.com/package/@react-hive/honey-style)


Honey Style is a lightweight, modular CSS-in-JS solution for React designed to give you full control over styling with minimal runtime overhead.

Inspired by libraries like styled-components, Honey Style provides:

- ⚡️ Runtime style injection using a single `<style>` tag.
- 🧠 Style deduplication and usage tracking for efficient memory and performance.
- 🎨 ClassName hashing and scoping to avoid collisions.
- 🛠️ Typed style props and responsive utilities.

It's built for design systems, scalable UI libraries, or developers who want a transparent and customizable styling layer without magic.
npm package: @react-hook-observability/hooks
Description: provides Observability as React Hooks in React.
Latest version: 0.1.33

<p align="center">
    <h1 align="center">@react-hook-observability/hooks</h1>
</p>

<p align="center">
  <a aria-label="NPM version" href="https://www.npmjs.com/package/next">
    <img alt="" src="https://img.shields.io/npm/v/@react-hook-observability/hooks.svg?style=for-the-badge&labelColor=000000">
  </a>
</p>

## About

**react-hook-observability** is a library that provides Observability as React Hooks in React.

**react-hook-observability** provides the following React Hooks.

| Hook Name                | Description                              | README                                                                           |
| :----------------------- | :--------------------------------------- | :------------------------------------------------------------------------------- |
| `useBrowserEventSpans`   | Get spans when web browser event occurs. | [useBrowserEventSpans](./packages/hooks/use-browser-event-spans/README.md)       |
| `useClientConsoleTracer` | Get tracer in web browser console.       | [useClientConsoleTracer](./packages/hooks/use-client-console-exporter/README.md) |

## Getting Started

Install the library.

### npm

```bash
npm install @react-hook-observability/hooks
```

### yarn

```bash
yarn add @react-hook-observability/hooks
```

### pnpm

```bash
pnpm add @react-hook-observability/hooks
```

### bun

```bash
bun add @react-hook-observability/hooks
```

## Usage

### useBrowserEventSpans + useClientConsoleExporter

```tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // 1. Setup Interactor and return following properties.
  // - watchRef: <html> tag ref
  // - spans: trace spans
  // - resetSpans: reset trace spans
  const { watchRef, spans, resetSpans } = useBrowserEventSpans({
    eventKinds: ["click"],
    batchConfig: {
      scheduledDelayMillis: 100,
    },
  });
  // 2. Setup Exporter. In this case, useClientConsoleExporter.
  useClientConsoleExporter({ spans, resetSpans, intervalDuration: 100 });
  // 3. Rendering html tag with watchRef.
  return (
    <html lang="en" ref={watchRef}>
      <body className={inter.className}>{children}</body>
    </html>
  );
}
```

## Contributing

see [CONTRIBUTING.md](./CONTRIBUTING.md)
npm package: @react-hook-observability/nextjs-hooks
Description: provides Observability as React Hooks in React.
Latest version: 0.1.7

<p>
    <h1 align="center">@react-hook-observability/nextjs-hooks</h1>
</p>

<p align="center">
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook-observability/nextjs-hooks">
    <img alt="" src="https://img.shields.io/npm/v/@react-hook-observability/nextjs-hooks.svg?style=for-the-badge&labelColor=000000">
  </a>
</p>

## About

**@react-hook-observability/nextjs-hooks** is a library that provides Observability as React Hooks in React and this is specific to Next.js.

## Getting Started

Install the library.

### npm

```bash
npm install @react-hook-observability/nextjs-hooks
```

### yarn

```bash
yarn add @react-hook-observability/nextjs-hooks
```

### pnpm

```bash
pnpm add @react-hook-observability/nextjs-hooks
```

### bun

```bash
bun add @react-hook-observability/nextjs-hooks
```
npm package: @react-hook-observability/nextjs-server-actions
Description: provides Observability as React Hooks in React.
Latest version: 0.1.6

<p>
    <h1 align="center">@react-hook-observability/nextjs-server-actions</h1>
</p>

<p align="center">
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook-observability/nextjs-server-actions">
    <img alt="" src="https://img.shields.io/npm/v/@react-hook-observability/nextjs-server-actions.svg?style=for-the-badge&labelColor=000000">
  </a>
</p>
## About

**@react-hook-observability/nextjs-server-actions** provides the following ServerActions.

| ServerAction Name | Description               | README                                                               |
| :---------------- | :------------------------ | :------------------------------------------------------------------- |
| `exportOtlp`      | Send data in OTLP format. | [exportOtlp](./packages/nextjs-server-actions/export-otlp/README.md) |


## Getting Started

Install the library.

### npm

```bash
npm install @react-hook-observability/nextjs-server-actions
```

### yarn

```bash
yarn add @react-hook-observability/nextjs-server-actions
```

### pnpm

```bash
pnpm add @react-hook-observability/nextjs-server-actions
```

### bun

```bash
bun add @react-hook-observability/nextjs-server-actions
```
npm package: @react-hook/change
Description: A React hook that invokes a callback anytime a value changes
Author: Jared Lunde
Latest version: 1.0.0

<hr>
<div align="center">
  <h1 align="center">
    useChange()
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@react-hook/change">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/change?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hook/change">
    <img alt="Types" src="https://img.shields.io/npm/types/@react-hook/change?style=for-the-badge&labelColor=24292e">
  </a>
  <!--
  <a aria-label="Code coverage report" href="https://codecov.io/gh/jaredLunde/react-hook">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.com/jaredLunde/react-hook">
    <img alt="Build status" src="https://img.shields.io/travis/com/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  -->
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook/change">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/change?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/change?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @react-hook/change</pre>
<hr>

A React hook that invokes a callback anytime a value changes

## Quick Start

```jsx harmony
import useChange from '@react-hook/change'

const useChangeLog = (value) => {
  // Logs the value each time it changes
  useChange(value, console.log)
}
```

## API

### useChange(value, onChange)

```ts
const useChange = <T extends any>(
  value: T,
  onChange: (current: T, prev: T) => any
): void
```

| Argument | Type                           | Required? | Description                                           |
| -------- | ------------------------------ | --------- | ----------------------------------------------------- |
| value    | `T`                            | Yes       | The value to watch for changes to                     |
| onChange | `(current: T, prev: T) => any` | Yes       | This callback is invoked any time the `value` changes |

### Returns `void`

## LICENSE

MIT
npm package: @react-hook/copy
Description: A React hook for copying text to the clipboard
Author: Jared Lunde
Latest version: 2.0.1

<hr>
<div align="center">
  <h1 align="center">
    useCopy()
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@react-hook/copy">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/copy?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hook/copy">
    <img alt="Types" src="https://img.shields.io/npm/types/@react-hook/copy?style=for-the-badge&labelColor=24292e">
  </a>
  <!--
  <a aria-label="Code coverage report" href="https://codecov.io/gh/jaredLunde/react-hook">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.com/jaredLunde/react-hook">
    <img alt="Build status" src="https://img.shields.io/travis/com/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  -->
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook/copy">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/copy?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/copy?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @react-hook/copy</pre>
<hr>

A React hook for copying text to the clipboard

## Quick Start

```jsx harmony
import useCopy from '@react-hook/copy'

const Component = (props) => {
  const {copied, copy, reset} = useCopy(
    'This text will be copied to the clipboard'
  )

  return <a onClick={copy}>{copied === false ? 'Copy' : 'Copied'}</a>
}
```

## API

### useCopy(text: string)

| Argument | Type     | Required? | Description                                                       |
| -------- | -------- | --------- | ----------------------------------------------------------------- |
| text     | `string` | Yes       | The text you want to copy to the clipboard when `copy` is clicked |

### Returns `{copied: boolean, copy: () => void, reset: () => void}`

## LICENSE

MIT
npm package: @react-hook/latest
Description: A React hook that updates useRef().current with the most recent value each invocation
Author: Jared Lunde
Latest version: 1.0.3

<hr>
<div align="center">
  <h1 align="center">
    useLatest()
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@react-hook/latest">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/latest?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hook/latest">
    <img alt="Types" src="https://img.shields.io/npm/types/@react-hook/latest?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.com/jaredLunde/react-hook">
    <img alt="Build status" src="https://img.shields.io/travis/com/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook/latest">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/latest?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/latest?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @react-hook/latest</pre>
<hr>

A React hook that updates useRef().current with the most recent value each invocation

## Quick Start

```jsx harmony
import useLatest from '@react-hook/latest'

const useEvent = (element, name, listener) => {
  const latest = useLatest(listener)

  React.useEffect(() => {
    const listen = (e) => latest.current(e)
    element.addEventListener(name, listen)
    return () => element.removeEventListener(name, listen)
  }, [latest])
}
```

## API

### useLatest(value)

```ts
const useLatest: <T extends any>(current: T) => React.MutableRefObject<T>
```

### Props

| Prop  | Type            | Required? | Description               |
| ----- | --------------- | --------- | ------------------------- |
| value | `T extends any` | Yes       | Any value you want stored |

### Returns `React.MutableRefObject<T>`

## LICENSE

MIT
npm package: @react-hook/merged-ref
Description: A React hook for merging multiple refs into one ref
Author: Jared Lunde
Latest version: 1.3.2

<hr>
<div align="center">
  <h1 align="center">
    useMergedRef()
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@react-hook/merged-ref">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/merged-ref?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hook/merged-ref">
    <img alt="Types" src="https://img.shields.io/npm/types/@react-hook/merged-ref?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.com/jaredLunde/react-hook">
    <img alt="Build status" src="https://img.shields.io/travis/com/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook/merged-ref">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/merged-ref?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/merged-ref?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @react-hook/merged-ref</pre>
<hr>

A React hook for merging multiple refs into one ref

## Quick Start

```jsx harmony
import React from 'react'
import useMergedRef from '@react-hook/merged-ref'

const Component = React.forwardRef((props, ref) => {
  const otherRef = React.useRef(null)
  const multiRef = useMergedRef(ref, otherRef)
  return <div ref={multiRef} />
})
```

## API

### `useMergedRef(...refs)`

```ts
function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T>
```

| Argument | Description                                                        |
| -------- | ------------------------------------------------------------------ |
| refs     | React callback refs or refs created with `useRef()`, `createRef()` |

#### Returns `React.RefCallback`

Returns a callback ref

## LICENSE

MIT
npm package: @react-hook/passive-layout-effect
Description: A React hook that uses useEffect() on the server and useLayoutEffect() in the browser
Author: Jared Lunde
Latest version: 1.2.1

<hr>
<div align="center">
  <h1 align="center">
    usePassiveLayoutEffect()
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@react-hook/passive-layout-effect">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/passive-layout-effect?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hook/passive-layout-effect">
    <img alt="Types" src="https://img.shields.io/npm/types/@react-hook/passive-layout-effect?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.com/jaredLunde/react-hook">
    <img alt="Build status" src="https://img.shields.io/travis/com/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook/passive-layout-effect">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/passive-layout-effect?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/passive-layout-effect?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @react-hook/passive-layout-effect</pre>
<hr>

A React hook that uses `useEffect()` on the server and `useLayoutEffect()` in the browser

## Quick Start

```jsx harmony
import useLayoutEffect from '@react-hook/passive-layout-effect'

const Component = ({foo, bar}) => {
  // Used the same way useEffect() and useLayoutEffect() are
  useLayoutEffect(() => {}, [foo, bar])
}
```

## Full credit to

[Dan Abramov](https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85)

## LICENSE

MIT
npm package: @react-hook/previous
Description: A React hook that stores a value from the previous render
Author: Jared Lunde
Latest version: 1.0.1

<hr>
<div align="center">
  <h1 align="center">
    usePrevious()
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@react-hook/previous">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/previous?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hook/previous">
    <img alt="Types" src="https://img.shields.io/npm/types/@react-hook/previous?style=for-the-badge&labelColor=24292e">
  </a>
  <!--
  <a aria-label="Code coverage report" href="https://codecov.io/gh/jaredLunde/react-hook">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.com/jaredLunde/react-hook">
    <img alt="Build status" src="https://img.shields.io/travis/com/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  -->
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook/previous">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/previous?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/previous?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @react-hook/previous</pre>
<hr>

A React hook that stores a value from the previous render.

## Quick Start

```jsx harmony
import * as React from 'react'
import usePrevious from '@react-hook/previous'

const useChanged = (onChange) => {
  const [status, setStatus] = React.useState('off')
  const prevStatus = usePrevious(status)

  React.useEffect(() => {
    if (status !== prevStatus) onChange()
  }, [status])

  return [status, setStatus]
}
```

## API

### usePrevious()

```ts
const usePrevious: <T extends any>(
  value: T,
  initialValue?: T | undefined
) => T | undefined
```

| Argument     | Type            | Default     | Required? | Description                                                               |
| ------------ | --------------- | ----------- | --------- | ------------------------------------------------------------------------- |
| value        | `T`             |             | Yes       | The current value                                                         |
| initialValue | `T | undefined` | `undefined` | No        | The value returned by the hook when the current value has not yet changed |

## LICENSE

MIT
npm package: @react-hook/toggle
Description: A React hook for toggling between two values
Author: Jared Lunde
Latest version: 2.0.1

<hr>
<div align="center">
  <h1 align="center">
    useToggle()
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@react-hook/toggle">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/toggle?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hook/toggle">
    <img alt="Types" src="https://img.shields.io/npm/types/@react-hook/toggle?style=for-the-badge&labelColor=24292e">
  </a>
  <!--
  <a aria-label="Code coverage report" href="https://codecov.io/gh/jaredLunde/react-hook">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.com/jaredLunde/react-hook">
    <img alt="Build status" src="https://img.shields.io/travis/com/jaredLunde/react-hook?style=for-the-badge&labelColor=24292e">
  </a>
  -->
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook/toggle">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/toggle?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/toggle?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @react-hook/toggle</pre>
<hr>

A React hook for toggling between two values

## Quick Start

```jsx harmony
import useToggle from '@react-hook/toggle'

const Component = (props) => {
  const [value, toggle] = useToggle(false, true)

  return (
    <button onClick={toggle}>
      {value === false ? 'Toggle on' : 'Toggle off'}
    </button>
  )
}
```

## API

### useToggle(off?, on?, defaultValue?)

```ts
function useToggle<Off extends any, On extends any>(
  off: Off,
  on: On,
  defaultValue: Off | On = off
): [Off | On, () => void]
```

| Argument     | Type       | Default | Required? | Description                                                        |
| ------------ | ---------- | ------- | --------- | ------------------------------------------------------------------ |
| off          | `Off`      | `false` | No        | The value of the toggle in its `off` state                         |
| on           | `On`       | `true`  | No        | The value of the toggle in its `on` state                          |
| defaultValue | `Off | On` | `off`   | No        | The default value of the toggle, either the value of `off` or `on` |

## LICENSE

MIT
npm package: @react-hook/window-scroll
Description: A React hook for updating components when the scroll position of the window on the y-axis changes
Author: Jared Lunde
Latest version: 1.3.0

<hr>
<div align="center">
  <h1 align="center">
    useScrollPosition()
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@react-hook/window-scroll">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/window-scroll?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hook/window-scroll">
    <img alt="Types" src="https://img.shields.io/npm/types/@react-hook/window-scroll?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook/window-scroll">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/window-scroll?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/window-scroll?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @react-hook/window-scroll</pre>
<hr>

A React hook for updating components when the scroll position of the window on the y-axis changes.
This hook throttles updates to the scroll position using [useThrottle()](https://github.com/jaredLunde/react-hook/tree/master/packages/throttle)
at `30fps` by default, but this rate is configurable.

## Quick Start

[Check out the example on **CodeSandbox**](https://codesandbox.io/s/react-hookwindow-size-and-react-hookwindow-scroll-examples-oqmer?file=/src/App.js)

```jsx harmony
import useScrollPosition from '@react-hook/window-scroll'

const Component = (props) => {
  const scrollY = useScrollPosition(60 /*fps*/)
  return <div>scroll pos: {scrollY}</div>
}
```

## API

### useScrollPosition(fps?: number): number

A hook that performantly updates its scroll position at a constant frame rate.

#### Arguments

|     | Type     | Default | Description                                                                   |
| --- | -------- | ------- | ----------------------------------------------------------------------------- |
| fps | `number` | `30`    | Defines the rate in frames per second at which the scroll position is updated |

#### Returns `scrollY: number`

|         | Type     | Description                                             |
| ------- | -------- | ------------------------------------------------------- |
| scrollY | `number` | The current scroll position of the window on the y-axis |

## LICENSE

MIT
npm package: @react-hookbox/after-loading-effect
Description: useAfterLoadingEffect
Author: hakobpogh
Latest version: 1.3.0

# @react-hookbox/after-loading-effect

> useAfterLoadingEffect

[![NPM][npm-image]][npm-link]
[![Minzipped Bundle Size][bundlephobia-image]][bundlephobia-link]

## Install

```bash
npm install --save @react-hookbox/after-loading-effect
```
or
```bash
yarn add @react-hookbox/after-loading-effect
```

## Usage

### useAfterLoadingEffect

Both for JavaScript and Typescript:

```typescript
import { useAfterLoadingEffect } from '@react-hookbox/after-loading-effect';
// OR
// import useAfterLoadingEffect from '@react-hookbox/after-loading-effect';

// then
useAfterLoadingEffect(isLoading, () => {
  // this will work only when isLoading turned from true to false
  console.log('Loading ended! 🎉🎉🎉');
});
```

## Params

### useAfterLoadingEffect

* `isLoading: boolean`. When this changes from true to false,
  then the callback fn will be called in effect-ive time.
* `fn: EffectCallback`. the callback function to call after loading ends.
  The return value of this function will be provided to the effect hook.
* `useEffectHook = useEffect`. (Optional) The hook to use for calling the
  callback function.

## License

MIT © [hakobpogh][github-hakobpogh]

[npm-image]: https://img.shields.io/npm/v/@react-hookbox/after-loading-effect.svg
[npm-link]: https://www.npmjs.com/package/@react-hookbox/after-loading-effect
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@react-hookbox/after-loading-effect
[bundlephobia-link]: https://bundlephobia.com/result?p=@react-hookbox/after-loading-effect
[github-hakobpogh]: https://github.com/hakobpogh
npm package: @react-hookbox/enhanced-callback
Description: The enhanced version of useCallback that doesn't need deps array and keeps reference the same.
Author: hakobpogh
Latest version: 1.1.2

# @react-hookbox/enhanced-callback

> The enhanced version of useCallback. Enhanced callback doesn't need deps
> array and keeps reference the same.

[![NPM][npm-image]][npm-link]
[![Minzipped Bundle Size][bundlephobia-image]][bundlephobia-link]

## Install

```bash
npm install --save @react-hookbox/enhanced-callback
```
or
```bash
yarn add @react-hookbox/enhanced-callback
```

## Usage

both for JavaScript and Typescript:
```typescript
import { useEnhancedCallback } from '@react-hookbox/enhanced-callback';
// OR
// import useEnhancedCallback from '@react-hookbox/enhanced-callback';

// then
const myCallback = useEnhancedCallback((num, str) => {
  return str.repeat(Math.min(num, 2));
});

// this will work everywherre in you code
myCallback(8, 'hello');
```

`useEnhancedCallback` updates the callback immediately so you can use it
anytime you want. Just keep in mind that you should not rely on it to trigger
update in any deps list as it returns the same function-reference
and never changes it.

## Params

* `fn`. This is a required function parameter.
  The returned value will have the same type.

## License

MIT © [hakobpogh][github-hakobpogh]

[npm-image]: https://img.shields.io/npm/v/@react-hookbox/enhanced-callback.svg
[npm-link]: https://www.npmjs.com/package/@react-hookbox/enhanced-callback
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@react-hookbox/enhanced-callback
[bundlephobia-link]: https://bundlephobia.com/result?p=@react-hookbox/enhanced-callback
[github-hakobpogh]: https://github.com/hakobpogh
npm package: @react-hookbox/event-callback
Description: Material UI's useEventCallback with better type definitions.
Author: hakobpogh
Latest version: 1.3.0

# @react-hookbox/event-callback

> Material UI's useEventCallback with better type definitions.

[![NPM][npm-image]][npm-link]
[![Minzipped Bundle Size][bundlephobia-image]][bundlephobia-link]

## Install

```bash
npm install --save @react-hookbox/event-callback
```
or
```bash
yarn add @react-hookbox/event-callback
```


## Usage

both for JavaScript and Typescript:
```typescript
import { useEventCallback } from '@react-hookbox/event-callback';
// OR
// import useEventCallback from '@react-hookbox/event-callback';

// then
const myCallback = useEventCallback((num, str) => {
  return str.repeat(Math.min(num, 2));
});
```

`useEventCallback` updates the callback it's using after
an "effective-time". So make sure to use it as a callback
or in a `useEffect` which is placed after `useEventCallback`;

## Params

* `fn`. This is a required function parameter.
  The returned value will have the same type.

  > ***Note:*** The return value will be updated after an
  "effect-ive time".

  That means the returned value should be used as an event
  callback or in an event callback.

## License

MIT © [hakobpogh][github-hakobpogh]

[npm-image]: https://img.shields.io/npm/v/@react-hookbox/event-callback.svg
[npm-link]: https://www.npmjs.com/package/@react-hookbox/event-callback
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@react-hookbox/event-callback
[bundlephobia-link]: https://bundlephobia.com/result?p=@react-hookbox/event-callback
[github-hakobpogh]: https://github.com/hakobpogh