Fluid Height

Automatic smooth height transitions for React components

CSS can't smoothly transition height when content changes. This library solves that. Simply wrap the content with FluidHeight and you can have a smooth height transitions

import { FluidHeight } from "fluid-height";

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

Custom Timing

You can customize the transition speed and easing with props.

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