# react-animate-height-vesna

> Lightweight, no dependency React component for animating height using CSS transitions.

Latest version **0.9.1-3** (published 2017-04-14) · 0 weekly downloads

## Install

```sh
npm install react-animate-height-vesna
pnpm add react-animate-height-vesna
yarn add react-animate-height-vesna
bun add react-animate-height-vesna
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.1-3 |
| Published | 2017-04-14 |
| First published | 2017-04-14 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Stanko |
| Maintainers | react-animate-height |
| Keywords | react, react-component, slide, slide up, slide down, animate height |

## Links

- npm: https://www.npmjs.com/package/react-animate-height-vesna
- Repository: https://github.com/SvetlanaVesna/react-animate-height
- Issues: https://github.com/SvetlanaVesna/react-animate-height/issues
- npm.io page: https://npm.io/package/react-animate-height-vesna

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

- 0.9.1-3 (latest) — 2017-04-14
- 0.9.1-2 — 2017-04-14

## README

# Animate Height

Lightweight, no dependency React component for animating height using CSS transitions.
Slide up/down the element, and to any specific height.

## Demo & Examples

Live demo: [stanko.github.io/react-animate-height](https://stanko.github.io/react-animate-height/)

To build the examples locally, run:

```
npm install
npm start
```

Then open [`localhost:8000`](http://localhost:8000) in a browser.


## Installation

The easiest way to use react-animate-height is to install it from NPM and include it in your own React build process (using [Webpack](http://webpack.github.io/)).

You can also use the standalone build by including `dist/react-animate-height.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.

```
npm install --save react-animate-height
```


## Usage

__EXPLAIN USAGE HERE__

```
import AnimateHeight from 'react-animate-height';

<AnimateHeight
  duration={ 500 }
  height={ 'auto' }>
  <h1>Your content goes here</h1>
  <p>Put as many React or HTML components here.</p>
</AnimateHeight>
```

### Properties

* **height**: numeric or 'auto', required
  When changed, element height will be animated to that height.<br/>
  To slide up use <code>0</code>, for slide down use <code>'auto'</code>

* **duration**: integer, default: 250
  Duration of the animation in milliseconds

* **easing**: string, default: 'ease'
  CSS easing function to be applied to the animation
</p>

* **className**: string
  CSS class to be applied to the element

* **style**: object
  CSS style object, it will be merged with inline styles of the component


## Development (`src`, `lib` and the build process)

**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).

## License

[MIT](https://github.com/Stanko/react-animate-height/blob/master/LICENSE)

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