# use-layout-animation

> A React hook for easily using React Native's LayoutAnimation

Latest version **0.0.2** (published 2020-08-25) · 0 weekly downloads

## Install

```sh
npm install use-layout-animation
pnpm add use-layout-animation
yarn add use-layout-animation
bun add use-layout-animation
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-08-25 |
| First published | 2019-10-31 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | David Fant |
| Maintainers | fant |

## Links

- npm: https://www.npmjs.com/package/use-layout-animation
- Repository: https://github.com/davidfant/use-layout-animation
- Homepage: https://github.com/davidfant/use-layout-animation#readme
- Issues: https://github.com/davidfant/use-layout-animation/issues
- npm.io page: https://npm.io/package/use-layout-animation

## Recent versions

- 0.0.2 (latest) — 2020-08-25
- 0.0.1 — 2019-10-31

## README

# use-layout-animation

This module makes it easy to use [React Native's LayoutAnimation](https://facebook.github.io/react-native/docs/layoutanimation) with React Hooks. It triggers a layout animation whenever some values change. It is used similar to React's `useEffect`.

## Installation
```
yarn add use-layout-animation
```

## Usage

```ts
import { useLayoutAnimation } from 'use-layout-animation';

function Component(props) {
    useLayoutAnimation([props.animateWhenThisPropChanges]);
    // ...
}
```

### Advanced usage

```ts
function Component(props) {
    useLayoutAnimation(
        // props that trigger a layout animation when they change
        [props.animateWhenThisPropChanges, props.orWhenThisPropChanges],
        // LayoutAnimationConfig
        // For reference, see all available presets here:
        // https://facebook.github.io/react-native/docs/layoutanimation#presets
        LayoutAnimation.Presets.spring,
        // Callback when animations end
        () => alert('layout animation done'),
    );
}
```

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