Possible to do 100vh - [<x>px]?

[Olle Bergkvist]

Can you do this kind of calc somehow?

I would like to do 100vh - hero section?

[Michael Vasin]

Hi @ollebergkvist,

yes, it's in the readme (the second example)

import { use100vh } from 'react-div-100vh'

const MyHalfHeightExampleComponent = ({ children }) => {
  const height = use100vh()
  const theValueYouWantToSubstract = 123 // pixels
  const neededHeight = height ? height - theValueYouWantToSubstract : '100vh'
  // the above is needed for SSR, if you don't use SSR
  // just do
  // const neededHeight = height - theValueYouWantToSubstract

  return <div style={{ height: neededHeight + 'px' }}>{children}</div>
}