react-transition-box

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
innerStyle?	Pass this props to override default style of inner div.	React.CSSProperties
...others	Other valid attributes to be added to the root div.	any

License

react-transition-box is available under the MIT License.