React component for easily transitioning your container size based on children 🎁

Implemented using React Hooks and make use of
HTMLObjectElement for listening to your component resize ↔️ ↕️ events

See working example here.

Installation

$ yarn add react-transition-box # or using npm

Usage

import React from 'react';
import TransitionBox from 'react-transition-box';
import LargeContent from './LargeContent';
import SmallContent from './SmallContent';

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

API

<TransitionBox> 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-transition-box is available under the MIT License.