react-transitioning-container

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-transitioning-container # or using npm

Usage

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

<TransitioningContainer> component accepts these following props:

License

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