@height-sync/react NPM

🔄 React Height Sync

A simple yet powerful React library for syncing the heights and scroll position of multiple components.

📦 Installation

npm install @height-sync/react

# OR
pnpm install @height-sync/react

# OR
yarn add @height-sync/react

🔨 Usage

import HeightSyncWrapper from "@height-sync/react/HeightSyncWrapper";
import HeightSyncItem from "@height-sync/react/HeightSyncItem";

<HeightSyncWrapper syncScroll={true}>
  <HeightSyncItem>
    <div>item1</div>
    <div style={{ height: "30px" }}>item2</div>
    <div>item3</div>
  </HeightSyncItem>
  <HeightSyncItem>
    <div>item4</div>
    <div style={{ height: "20px" }}>item5</div>
    <div>item6</div>
  </HeightSyncItem>
</HeightSyncWrapper>;

In this example, the height of each corresponding child of the HeightSyncItem components will be the same, based on the tallest element in each position, and scrolling one HeightSyncItem will cause the other to scroll as well.

⚙ API

HeightSyncWrapper - A wrapper component that handles the synchronization of its children. It accepts a syncScroll prop which, when true, syncs the scroll position of its children.
HeightSyncItem - Represents an individual item that should have its height synced with other HeightSyncItem components. Place the elements you want to have their height synced within this component.