# core-hooks

> [![Travis build status](http://img.shields.io/travis/jamesplease/core-hooks.svg?style=flat)](https://travis-ci.org/jamesplease/core-hooks) [![npm version](https://img.shields.io/npm/v/core-hooks.svg)](https://www.npmjs.com/package/core-hooks) [![gzip size

Latest version **2.0.0** (published 2021-12-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install core-hooks
pnpm add core-hooks
yarn add core-hooks
bun add core-hooks
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-12-10 |
| First published | 2019-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 83.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | James Please |
| Maintainers | jmeas |
| Keywords | react, hooks, hook |

## Links

- npm: https://www.npmjs.com/package/core-hooks
- Repository: https://github.com/jamesplease/core-hooks
- Homepage: https://github.com/jamesplease/core-hooks#readme
- Issues: https://github.com/jamesplease/core-hooks/issues
- npm.io page: https://npm.io/package/core-hooks

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2021-12-10
- 2.0.0-beta.1 (beta) — 2021-12-10
- 1.3.0-beta.0 — 2021-06-30
- 1.2.0 — 2021-04-24
- 1.2.0-beta.1 — 2020-10-20
- 1.2.0-beta.0 — 2020-07-14
- 1.1.0 — 2020-07-14
- 1.1.0-beta.0 — 2020-06-29
- 1.0.1 — 2020-05-31
- 1.0.0 — 2020-05-30
- 1.0.0-beta.0 — 2020-05-30
- 0.0.4 — 2019-05-26
- 0.0.3 — 2019-05-26
- 0.0.2 — 2019-05-26
- 0.0.1 — 2019-03-30

## README

# Core Hooks

[![Travis build status](http://img.shields.io/travis/jamesplease/core-hooks.svg?style=flat)](https://travis-ci.org/jamesplease/core-hooks)
[![npm version](https://img.shields.io/npm/v/core-hooks.svg)](https://www.npmjs.com/package/core-hooks)
[![gzip size](http://img.badgesize.io/https://unpkg.com/core-hooks/lib/index.js?compression=gzip)](https://unpkg.com/core-hooks/lib/index.js)

A small collection of commonly-used custom [React Hooks](https://reactjs.org/docs/hooks-intro.html).

## Motivation

I regularly find myself reusing the same custom hooks in all of my projects, so I abstracted them into a library.

This collection of hooks is intended to remain reasonably sized.

## Installation

Install using [npm](https://www.npmjs.com):

```
npm install core-hooks
```

or [yarn](https://yarnpkg.com/):

```
yarn add core-hooks
```

## Hooks

- [useConstant](#useconstant-valuefn-)
- [useOnChange](#useonchange-value-callback-comparator-)
- [usePrevious](#useprevious-value-)
- [useIsMounted](#useismounted)
- [useLatestRef](#uselatestref-value-)
- [useMountTransition](#usemounttransition-options-)

### `useConstant( valueFn )`

A hook that guarantees a constant value. Similar to `useMemo`, except with the guarantee that the
cached value will never be purged.

Use `useMemo` when your application will not break if the value is recomputed. Use `useConstant` when
the value must never change.

```js
import { useConstant } from 'core-hooks';

useConstant(() => createStore());
```

### `useOnChange( value, callback, [comparator] )`

A hook that calls `callback` anytime that `value` changes. `callback` is
called with two arguments: `(currentValue, previousValue)`.

Pass a `comparator` function to customize the comparison. It is called with two values,
`currentValue` and `previousValue`. The default comparison is a strict equals (`===`).

This hook does not return any value.

```js
import { useOnChange } from 'core-hooks';

useOnChange(isVisible, (isVisible, wasVisible) => {
  if (isVisible && !wasVisible) {
    console.log('It just became visible.');
  }
});
```

### `usePrevious( value )`

This hook returns the previous value of `value`.

```js
import { usePrevious } from 'core-hooks';

const prevState = usePrevious(state);
```

> Note: if you wish to detect _when_ a value changes, then you may want to consider
> [useOnChange](#use-on-change) instead.

### `useIsMounted()`

Returns a Boolean representing whether or not the component has mounted.

```js
import { useIsMounted } from 'core-hooks';

const isMounted = useIsMounted();
```

### `useLatestRef( value )`

Returns an up-to-date [ref](https://reactjs.org/docs/hooks-reference.html#useref) of `value`. This
is useful when you need to access `value` in side effect callbacks in your component, such as
`setTimeout`, `setInterval`, or user input events like key presses.

```js
import { useState } from 'react';
import { useLatestRef } from 'core-hooks';

const [state, setState] = useState();
const stateRef = useLatestRef(state);
```

### `useMountTransition( options )`

A hook that allows you to create transitions between two states. Common use cases are:

- General two-state transitions (such as open and close)
- Animated mounting/unmounting of a single component

The API was designed with both CSS and JS transitions in mind.

#### `options`

- `shouldBeMounted`: A Boolean representing which state the element is in
- `transitionDurationMs`: _Optional_. How long the transition between the states lasts
- `onEnter`: _Optional_. A callback that is called once the enter transition is complete
- `onLeave`: _Optional_. A callback that is called once the leave transition is complete
- `onEnteringTimeout`: _Optional_. Pass `true` when using CSS Transitions. This creates a delay between the
  `shouldMount` and `useActiveClass` booleans being flipped to `true`, so that
  your mount CSS transition animates properly.
  If you are not using CSS transitions, then you do not need to pass this option.

The following example demonstrates how you can use this hook for animating a component that
is being mounted.

```js
import { useMountTransition } from 'core-hooks';
import classnames from 'classnames';

function MyComponent({ renderChildren }) {
  const [shouldMount, useActiveClass] = useMountTransition({
    shouldBeMounted: renderChildren,
    transitionDurationMs: 500,
    onEnteringTimeout: true,
  });

  return (
    <>
      {shouldMount && (
        <div
          className={classnames('myDiv', {
            'myDiv-active': useActiveClass,
          })}>
          This div animates in and out
        </div>
      )}
    </>
  );
}
```

> Note: This can be considered a Hook replacement of the react-transition-group
> [`Transition` component](https://reactcommunity.org/react-transition-group/transition),
> but _not_ for the [`TransitionGroup` component](https://reactcommunity.org/react-transition-group/transition-group).

---
_Source: https://npm.io/package/core-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._