useHeaderHeight

A hook to get the height of the header when paired with coral-organisms

Import


import { useHeaderHeight } from '@octopus-energy/coral/hooks';

Basic usage

useHeaderHeight is used in CoralConfigProvider in conjunction with the headerRef property to calculate the height of the integrated Header from coral-organisms.

app.tsx


const headerRef = useRef<HTMLDivElement>(null);
 
<CoralConfigProvider
    config={{
        ...
        headerHeight: useHeaderHeight(headerRef),
        headerRef,
    }}
>

This adds headerHeight to the theme, meaning it can be used globally across your application.


const { headerHeight } = useCoralConfig();