Support for nested React components?

[thiemeljiri]

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

[loba-b]

Hi @thiemeljiri Of course it is possible. Important is that you need all element wrap into component EqualHeight and all elements for which you want the same height need have the same name.

Here you have example of code.

const ComponentOne = () => {
  return (
    <EqualHeightElement name="ExampleName">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
        </p>
    </EqualHeightElement>
  )
}

const ComponentTwo = () => {
  return (
    <EqualHeightElement name="ExampleName">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
        </p>
    </EqualHeightElement>
  )
}

const App = () => {
  return (
    <EqualHeight>
      <ComponentOne />
      <ComponentTwo />
    </EqualHeight>
  )
}

[thiemeljiri]

You're right, thank you! (I was getting an error when I tried to do this. But now I realised it was because of Storybook - when I tried to view the isolated child component. It actually worked for the parent story. And for the child I can use a decorator.)

I have a suggestion. Do you think it would be possible to add an option to match the height per row? This of course would be possible only if the Y position of the top of the elements on the same row would be the same already (achievable via CSS). This would be very useful until CSS subgrid is widely implemented.

Let's imagine the following quite common example. You want the content to start on the same Y position on the each row, but as close to the heading as possible. It's possible with CSS subgrid, but that is not yet implemented in most browsers, so some JS is necessary. With simple height matching of all the elements with the same name it won't work. When one very long heading appears in the list, then the heights of all the headings are unnecessarily large and it's a waste of space and not looking OK.

The solution would be to internally calculate "row groups" from the set of EqualHeightElement instances with the same name (for each height calculation) by the Y position of the top of that elements. (Maybe some tolerance could be also a prop, but it shouldn't be needed.) Then finding the tallest element in each group separately and applying it to all the items in that group only.

┌────────────────────┐  ┌────────────────────┐  ┌────────────────────┐
│┌──────────────────┐│  │┌──────────────────┐│  │┌──────────────────┐│
││                  ││  ││                  ││  ││                  ││
││                  ││  ││                  ││  ││                  ││
││      Image       ││  ││      Image       ││  ││      Image       ││
││                  ││  ││                  ││  ││                  ││
││                  ││  ││                  ││  ││                  ││
│└──────────────────┘│  │└──────────────────┘│  │└──────────────────┘│
│ Short heading      │  │ Longer heading     │  │ Short heading      │
│                    │  │ on two rows        │  │                    │
├────────────────────┤  ├────────────────────┤  ├────────────────────┤
│ Content....        │  │ Content...         │  │ Content...         │
│                    │  │                    │  │                    │
│                    │  │                    │  │                    │
│                    │  │                    │  │                    │
│                    │  │                    │  │                    │
└────────────────────┘  └────────────────────┘  └────────────────────┘

┌────────────────────┐  ┌────────────────────┐  ┌────────────────────┐
│┌──────────────────┐│  │┌──────────────────┐│  │┌──────────────────┐│
││                  ││  ││                  ││  ││                  ││
││                  ││  ││                  ││  ││                  ││
││      Image       ││  ││      Image       ││  ││      Image       ││
││                  ││  ││                  ││  ││                  ││
││                  ││  ││                  ││  ││                  ││
│└──────────────────┘│  │└──────────────────┘│  │└──────────────────┘│
│ Short heading      │  │ Longer heading     │  │ Very long heading  │
│                    │  │ on two rows        │  │ that wraps to      │
│                    │  │                    │  │ three rows         │
├────────────────────┤  ├────────────────────┤  ├────────────────────┤
│ Content....        │  │ Content...         │  │ Content...         │
│                    │  │                    │  │                    │
│                    │  │                    │  │                    │
│                    │  │                    │  │                    │
└────────────────────┘  └────────────────────┘  └────────────────────┘

┌────────────────────┐  ┌────────────────────┐  ┌────────────────────┐
│┌──────────────────┐│  │┌──────────────────┐│  │┌──────────────────┐│
││                  ││  ││                  ││  ││                  ││
││                  ││  ││                  ││  ││                  ││
││      Image       ││  ││      Image       ││  ││      Image       ││
││                  ││  ││                  ││  ││                  ││
││                  ││  ││                  ││  ││                  ││
│└──────────────────┘│  │└──────────────────┘│  │└──────────────────┘│
│ Short heading      │  │ Short heading      │  │ Extremely long     │
│                    │  │                    │  │ heading that wraps │
│                    │  │                    │  │ to more than three │
│                    │  │                    │  │ rows               │
├────────────────────┤  ├────────────────────┤  ├────────────────────┤
│ Content....        │  │ Content...         │  │ Content...         │
│                    │  │                    │  │                    │
│                    │  │                    │  │                    │
└────────────────────┘  └────────────────────┘  └────────────────────┘

[loba-b]

I will deeply check your comment and reply when I go back from vacation. I need 2 weeks :)

[loba-b]

I would like to close this issues because the main issue was resolved but "equal per row" I wiould like to develop based on this report: https://github.com/loba-b/react-equal-height/issues/9