loba-b/react-equal-height

Compares element heights and sets the highest

React Equal Height

Compares element heights and sets the highest (based on react-hooks)

Installation

npm i react-equal-height

WARNING

Version >= 1.0.0 has deep changes which making the configuration from the old version incompatible.

INFO

In version 1.2.0 was added third option to run recalculate updateOnChange, please read about it in options for EqualHeightElement'

Library import

Library	Size	Description
react-equal-height	7.6kB	Library with styles that will be loaded on script startup to the <style> tag
react-equal-height/clean	10,8kB	Library without styles. It can be useful for SSR or to remove overhead for script with loading styles Styles needs to be added: by itself (copy below styles to your project styles) OR by import clean/main.css from package

Styles from clean/main.css

.equal-height-JlocK {
    display:block;
    overflow:hidden;
    transition-property:height
}

Usage

import React from 'react';
import { EqualHeight, EqualHeightElement } from 'react-equal-height';

const App = () => {
    return (
        <EqualHeight>
            <EqualHeightElement name="Name">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
                </p>
            </EqualHeightElement>
            <EqualHeightElement name="Name">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
                </p>
                <p>
                    tiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci.
                </p>
            </EqualHeightElement>
        </EqualHeight>
    )
}

export default App;

• EqualHeight - all elements for which height will be calculating must be included in this element
• EqualHeightElement - element for which will be calculating height
• EqualHeightContext - lib context

Options (EqualHeight)

Prop	Default	Required	Description
timeout	200	false	time to recalculate heights
animationSpeed	0.25 (second)	false	time of animation for height change (in milliseconds) (0: disable)
updateOnChange	undefined	false	It's a part of useEffect deps so in updateOnChange can be passed anything they allow

Options (EqualHeightElement)

Prop	Default	Required	Description
name		true	all heights of elements with the same name are comparing
tag	div	false	type of tag that wraps the elements
placeholder	false	false	to keeping height in place where element not exist
disable	false	false	disables EqualHeightElement (children are still passing)

Methods (update by 'useEffect deps')

import React from 'react';
import { EqualHeight, EqualHeightElement } from 'react-equal-height';

const App = () => {
    const [loadImage, setLoadImage] = useState<boolean>(false);

    return (
        <EqualHeight updateOnChange={loadImage}>
            <EqualHeightElement name="Name">
                <div className={styles.innerElement}>
                    <p>
                        <img src="https://via.placeholder.com/600x600" onLoad={(): void => setLoadImage(true)} alt="" />
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper viverra nam libero justo laoreet sit amet. Amet facilisis magna etiam tempor. Lobortis feugiat vivamus at augue eget.
                    </p>
                </div>
            </EqualHeightElement>
            <EqualHeightElement name="Name">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
                </p>
                <p>
                    tiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci.
                </p>
            </EqualHeightElement>
        </EqualHeight>
    )
}

export default App;

Methods (forceUpdate)

forceUpdate, setForceUpdate - force to recalculate heights for components

Example for recalculate after image loaded

by EqualHeightContext (Context)

import React, { useContext } from 'react';
import { EqualHeight, EqualHeightContext, EqualHeightElement } from 'react-equal-height';

const LoadImage = () => {
    const { setForceUpdate } = useContext(EqualHeightContext);

    const handleImage = () => (
        setForceUpdate((value: boolean) => !value)
    );

    return (
        <img src="https://via.placeholder.com/250x250" onLoad={handleImage} alt="" />
    );
};

const App = () => {
    return (
        <EqualHeight>
            <EqualHeightElement name="Name">
                <LoadImage />
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
                </p>
            </EqualHeightElement>
            <EqualHeightElement name="Name">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
                </p>
                <p>
                    tiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci.
                </p>
            </EqualHeightElement>
        </EqualHeight>
    )
}

export default App;

by EqualHeightConsumer (Context.Provider)

import React from 'react';
import { EqualHeight, EqualHeightConsumer, EqualHeightElement } from 'react-equal-height';

const App = () => {
    return (
        <EqualHeight>
            <EqualHeightElement name="Name">
                <p>
                    <EqualHeightConsumer>
                        {context => (
                            <img src="https://via.placeholder.com/500x500" onLoad={() => (context.setForceUpdate(value => !value))} alt="" />
                        )}
                    </EqualHeightConsumer>
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
                </p>
            </EqualHeightElement>
            <EqualHeightElement name="Name">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
                </p>
                <p>
                    tiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci.
                </p>
            </EqualHeightElement>
        </EqualHeight>
    )
}

export default App;

Image examples

Base

Placeholder

Disable

Scripts (package.json)

Prop	Description
build	building production version
watch	building production version with watching changes
server	local server for manual test

react-equal-height's Issues

Add ES5 version

Currently I cannot even use babel to transpile the the it to ES5 - I get the following warning

export 'EqualHeightElement' (imported as 'EqualHeightElement') was not found in 'react-equal-height/clean' (module has no exports)

Therefore it cannot be used as NPM package when you need to support IE11.

Support for Bootstrap columns

Hello developer, can you pass along the className property for the <EqualHeight> and <EqualHeightElement> components? This would make it possible to use the <EqualHeight> Component as a bootstrap row, and the <EqualHeightElement> as child columns (col-x, ...) when the appropriate classes are specified.

How does one deal with grid layouts with variable columns per row, and want equal heights per row?

I have a grid or flex layout which wrap my columns. I have different number of columns per width, so large may have 4, medium 3 columns, then down to 2. I do not use HTML to break these up as that is just PITA. CSS does it.

If I use EqualHeight which is great, it works, it changes ALL columns to the same height regardless of row. I noticed I have a lagr image in my last row, so all column image containers are set to that one, and so they are too large. Ideally you want it to have EqualHeight per row.

I am not sure how you would achieve that based on it being a flex or grid layout. I've never tried to see if JS can know the last or first elements in a grid/flex row. If it can, then this should be achievable.

In the meantime how does one deal with this? I think I will have to try to set a max. height on my columns content to prevent EqualHeight making them all too large based on a high one.

react-equal-height/clean doesn't work on NextJS app router

Hi, thanks for amazing work, I've used your library on several projects now.

There's a problem with building NextJS app with new app router (I didn't try this on pages router, so I don't know if it's limited to app router):

error node_modules/react-equal-height/index.js (1:8585) @ e.exports [as insertStyleElement]
error ReferenceError: document is not defined

I cloned the library and narrowed down the issue. When I'm importing <EqualHeightElement /> from react-equal-height/clean it seems like that component imports context from the main package and thus trying to inject css styles. Then it fails on ssr, because document is undefined.

I just copied the EqualHeightElement component and changed import to:

import { EqualHeightContext } from 'react-equal-height/clean';

and it worked

Problem refresh on resize window

The package works SSR on Next.JS and detect perfectly the height of each element.

However, when I resize my page nothing is happening. I got the same problem if I try to use the method forceUpdate, it's not working.

Does not work in Gatsby / SSR

First of all, thanks for this nice little library. I really like the simple API.

One issue: it breaks builds for SSR, such as Gatsby. Builds crash with the following error:

"document" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

It would be amazing to be able to use this for static site generators. Is there anything I can do on my side to get this running or will an update to the library be necessary (e.g. to check we're in a browser environment before running the script)?

Support for nested React components?

Hi,

How can I use this library when I need to equalize heights of elements that are in separate children React component(s)? It seems to support only the scenario when all the markup is inside one React component, which is not really usable for most of the scenarios. Or did I understand the documentation wrong?

Thank you!

BR,
Jiri