Fluid Height

Automatic smooth transition the height of content. Just wrap your content with FluidHeight - that's it

import { FluidHeight } from 'fluid-height';

function Example() {
  return (
    <FluidHeight>
      <YourContentThatChangesSize />
    </FluidHeight>
  );
}

Installation

npm install fluid-height

API

FluidHeight Component

Wrap the content you want to have smooth height transition with FluidHeight

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | - | The content to animate | | transitionDurationMs | number | 300 | Duration of the height transition in milliseconds | | transitionTimingFunction | string | "ease" | CSS timing function for the transition |

Basic usage

Default height transition is 300ms ease

<FluidHeight>
  <YourContentThatChangesSize />
</FluidHeight>

Customize transition

<FluidHeight
  transitionDurationMs={500}
  transitionTimingFunction="ease-in-out"
>
  <YourContentThatChangesSize />
</FluidHeight>

Browser Support

All Modern browsers

License

MIT © Manan Tank