useResponsiveValue(...)

useResponsiveValue(...) is a custom hook that returns the value for the current breakpoint. You provide an array of responsive values and it returns the value for the current breakpoint.

 open Ancestor

module Card = {
  @react.component
  let make = (~color, ~label) =>
    <Box
      borderRadius=[xs(1)]
      p=[xs(3)]
      fontSize=[xs(24->#px)]
      color=[xs("#fafafa"->#hex)]
      bgColor=[xs(color)]>
      {label->React.string}
    </Box>
}

@react.component
let make = () => {
  let color = Ancestor.useResponsiveValue(
    Theme.Colors.black,
    [xs(Theme.Colors.gray1), md(Theme.Colors.black)],
  )
  let label = Ancestor.useResponsiveValue(
    "Default",
    [
      xs("This text appears on xs"),
      md("This text text appears on sm"),
      lg("This text appears on lg"),
    ],
  )

  <Card color label />
}

info

Resize your browser to see the responsive values in action.

Default

API

The hook has the following type signature

let useResponsiveValue:(
 'value,
  ResponsiveValueHook.Styles.responsiveProp<'value>,
) => 'value

API​

API