Inline height not recalculated on resize

React-headroom seems to force an inline style height on the headroom-wrapper even though disableInlineStyles is set to true. I’d be fine with this if the height would recalculate when resizing, but it doesn’t.

The official version of headroom doesn’t seem to do this on the demo site.

[rafaelderolez]

After some more testing I see that headroom-wrapper gets an inline height to prevent the content underneath from jumping while switching from unfixed to unpinned.

Regardless, it would be nice if headroom recalculated its height.

[rafaelderolez]

@rusi Here’s my temporary fix:

When resizing the window, I execute setHeaderHeight which gets the height of my actual header element. I put it in the state of my component and then pass that in Headroom’s wrapperStyle prop. Hope that works for you! (You can probably debounce this to improve performance, but here’s a very barebones version.)

Note: I use disableInlineStyles as I have my own transitions and styling for Headroom.

componentDidMount() {
  this.setHeaderHeight.bind(this);
  window.addEventListener('resize', this.setHeaderHeight.bind(this));
}

setHeaderHeight() {
  const headerHeight = this.header.clientHeight;
  this.setState({ headerHeight });
}

render() {
    const { headerHeight } = this.state;

    return (
      <Headroom
        disableInlineStyles
        wrapperStyle={headerHeight}
      >
        <header ref={(ref) => { this.header = ref; }}>
        …
        </header>
      </Headroom>
  );
}

@KyleAMathews What do you think?