A React library with TypeScript support that automatically compares and sets the highest element height, including the ability to sort elements per row. Protected by the 'use client' directive, making it compatible with React Server Components and Next.js
npm install react-equal-heightManages a dynamic collection of UI elements, enabling efficient tracking, updating, and synchronization of their maximum
heights. It supports operations like adding, removing, and updating elements within the collection. Additionally, the
application allows grouping elements by rows, making it ideal for complex interfaces where elements' sizes and positions
need to be consistently managed and adjusted in real-time.
Protected by the 'use client' directive, ensuring
compatibility with React Server Components and Next.js.
Long story short: Compares heights of elements and sets the highest.
``bash`
npm i react-equal-height
What's new in version 2
> New equalRows option. Checks other elements within the same row and sets the highest height value only for elements
> within that specific row.
> New component. A helper for the new equalRows option
Migrate from version 1.x.x into 2.x.x
> Minimal changes are required, primarily to props:
>
> - The tag prop has been replaced by as in EqualHeightElement
> - The prop now only accepts an array based on DependencyList
> - The class name has been updated to equal-height-wrapper
- React 18: use (== 2.18.0)
- React <18: use react-equal-height@1.3.1 (without equalRows functionality)Library import
| Library | Size | Description |
|----------------------------|:--------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
react-equal-height | 17,6 kB | Library with styles that will be loaded startup to the