# react-transitioning-container

Latest version **1.0.6** (published 2019-03-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-transitioning-container
pnpm add react-transitioning-container
yarn add react-transitioning-container
bun add react-transitioning-container
```

## 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.0.6 |
| Published | 2019-03-19 |
| First published | 2019-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 653.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | AlbertLucianto |
| Maintainers | albertlucianto |
| Keywords | react, transition, animation |

## Links

- npm: https://www.npmjs.com/package/react-transitioning-container
- Repository: https://github.com/AlbertLucianto/react-transitioning-container
- Issues: https://github.com/AlbertLucianto/react-transitioning-container/issues
- npm.io page: https://npm.io/package/react-transitioning-container

## 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.0.6 (latest) — 2019-03-19
- 1.0.5 — 2019-03-17
- 1.0.4 — 2019-03-16
- 1.0.3 — 2019-03-16
- 1.0.2 — 2019-03-16
- 1.0.1 — 2019-03-15
- 1.0.0 — 2019-03-15
- 0.0.1 — 2019-03-14

## README

<p align="center"><a href="https://albertlucianto.github.io/react-transitioning-container" target="_blank" rel="noopener noreferrer"><img width="800" src="./web/assets/react-transitioning-container-header.jpg" alt="React Transitioning Container"></a></p>

<p align="center">React component for easily transitioning your container size based on children 🎁
<br />
<br />
Implemented using <b>React Hooks</b> and make use of
<br />
<b>HTMLObjectElement</b> for listening to your component resize ↔️ ↕️ events</p>

<p align="center">
<a href="https://travis-ci.org/AlbertLucianto/react-transitioning-container"><img src="https://travis-ci.org/AlbertLucianto/react-transitioning-container.svg?branch=master" alt="Build Status"></a>
<a href="https://npmcharts.com/compare/react-transitioning-container?minimal=true"><img src="https://img.shields.io/npm/dm/react-transitioning-container.svg" alt="Downloads"></a>
<a href="https://npmcharts.com/compare/react-transitioning-container?minimal=true"><img src="https://img.shields.io/npm/dt/react-transitioning-container.svg" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/react-transitioning-container"><img src="https://img.shields.io/npm/v/react-transitioning-container.svg" alt="Version"></a>
<a href="https://www.npmjs.com/package/react-transitioning-container"><img src="https://img.shields.io/npm/l/react-transitioning-container.svg" alt="License"></a>
<a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)" alt="License"></a>
</p>

<p align="center"><a href="https://albertlucianto.github.io/react-transitioning-container" target="_blank" rel="noopener noreferrer"><img width="280" src="./web/assets/demo.gif" alt="React Transitioning Container"></a></p>

<h2 align="center">See working example <a href="https://albertlucianto.github.io/react-transitioning-container" target="_blank" rel="noopener noreferrer">here</a>.</h2>

## Installation

```bash
$ yarn add react-transitioning-container # or using npm
```

## Usage

```jsx
import React from 'react';
import TransitioningContainer from 'react-transitioning-container';
import LargeContent from './LargeContent';
import SmallContent from './SmallContent';

export default function App({ isLarge }) {
  return (
    <TransitioningContainer duration={500}>
      {isLarge ? <LargeContent /> : <SmallContent />}
    </TransitioningContainer>
  );
}
```

## API

&lt;TransitioningContainer> component accepts these following props:

Name         | Description | Type
-------------|-----------|-----------
`duration` | Transition duration in ms. | `number`
`timingFunction?` | Transition timing function. Default: `'ease'` | `string`
`children` | Its size changes will trigger the container transition. | `Node` or `string`
`...others` | Other valid attributes to be added to the root `div`. | `any`

## License

react-transitioning-container is available under the MIT License.

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