# use-referee

> A collection of ref-related hooks.

Latest version **1.2.1** (published 2021-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-referee
pnpm add use-referee
yarn add use-referee
bun add use-referee
```

## 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 | 1.2.1 |
| Published | 2021-11-29 |
| First published | 2020-12-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | ^14.13.1 \|\| >=16.0.0 |
| Dependencies | 0 |
| Unpacked size | 54.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Marc Bouchenoire |
| Maintainers | marcbouchenoire |
| Keywords | react, hook, ref |

## Links

- npm: https://www.npmjs.com/package/use-referee
- Repository: https://github.com/bouchenoiremarc/use-referee
- npm.io page: https://npm.io/package/use-referee

## 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

- 1.2.1 (latest) — 2021-11-29
- 1.2.0 — 2021-09-14
- 1.1.3 — 2021-03-06
- 1.1.2 — 2021-03-02
- 1.1.1 — 2021-01-04
- 1.1.0 — 2020-12-31
- 1.0.0 — 2020-12-30

## README

# use-referee

⚽ A collection of ref-related hooks.

[![build](https://github.com/bouchenoiremarc/use-referee/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/bouchenoiremarc/use-referee/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/use-referee?color=%230cf)](https://www.npmjs.com/package/use-referee) [![gzipped](https://img.shields.io/bundlephobia/minzip/use-referee?label=gzipped&color=%2385f)](https://www.npmjs.com/package/use-referee) [![license](https://img.shields.io/github/license/bouchenoiremarc/use-referee?color=%23e4b)](https://github.com/bouchenoiremarc/use-referee/blob/main/LICENSE)

## Installation

#### Skypack

```javascript
import {
  useConstant,
  useLatest,
  usePrevious,
  useRefs
} from "https://cdn.skypack.dev/use-referee"
```

#### Yarn

```bash
yarn add use-referee
```

#### npm

```bash
npm install use-referee
```

## `useConstant`

```typescript
useConstant<T>(value: Lazy<T>) => T
```

Given a (lazy) variable, `useConstant` will return it as is while never updating or mutating it on subsequent changes.

### Usage

Import `useConstant`.

```typescript
import { useConstant } from "use-referee"
```

Declare a constant from an initial (lazy) value.

```typescript
const id = useConstant(() => uuid())

// id: "123e4567-e89b-12d3-a456-426614174000"
```

## `useLatest`

```typescript
useLatest<T>(value: T): MutableRefObject<T>
```

Given a variable, `useLatest` will return a ref which reflects its latest value—mutating itself on variable changes to do so.

### Usage

Import `useLatest`.

```typescript
import { useLatest } from "use-referee"
```

Pass it a variable and get a mutating ref of its latest value in return.

```typescript
const [state, setState] = useState(false)
const latest = useLatest(state)

// latest: { current: false }
```

Being a ref, `latest` will always reflect the latest `state` value even when omitted from dependency lists (e.g. `[]`).

```typescript
setState(true)

useEffect(() => {
  // latest: { current: true }
}, [])
```

## `usePrevious`

```typescript
usePrevious<T>(value: T) => T | undefined
```

Given a variable, `usePrevious` will return its previous value or `undefined` before an initial change has happened.

### Usage

Import `usePrevious`.

```typescript
import { usePrevious } from "use-referee"
```

Pass it a variable and get its previous value in return.

```typescript
const [state, setState] = useState(false)
const previous = usePrevious(state)

// previous: undefined

setState(true)

// previous: false

setState(false)

// previous: true
```

## `useRefs`

```typescript
useRefs<T>(...refs: Ref<T>[]) => RefCallback<T>
```

Given any number of refs, `useRefs` will return a single callback ref that merges them all.

### Usage

Import `useRefs`.

```typescript
import { useRefs } from "use-referee"
```

Pass it multiple refs and get a single ref in return.

```tsx
const refs = useRefs(ref, forwardedRef)

return <div ref={refs} />

// ref: { current: <div /> }
// forwardedRef: { current: <div /> }
```

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