useScrollBlockingOverlay

The

useScrollBlockOverlay

hook is used to toggle a component's visibility while blocking scrolling as it's visible.

Note: This hook is located in the ´@carla/flora-next` package and only works in applications using Next.js.

Params

All params are passed as an object.

Name	Type	Default	Description
defaultVisible	bool	false	The default visibility on initial render
maxWidth	int		The maximum width at which the overlay is visible. Automatically hides on resize

Returns

Array

: An array containing the

visible

state and the

setVisible

setter. It returns the same signature as

React.useState

does.

Examples

Dark Mode

function Component() {
  const [visible, setVisible] = useScrollBlockingOverlay()

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>Open</ActionButton>
      <Overlay
        visible={visible}
        bg="rgba(150, 150, 150, 0.5)"
        zIndex={100}
        top={0}
        right={0}
        bottom={0}
        left={0}>
        <Box padding={4} space={2} bg="white">
          <Text>I am an overlay</Text>
          <ActionButton onClick={() => setVisible(false)}>Close</ActionButton>
        </Box>
      </Overlay>
    </>
  )
}function Component() {
  const [visible, setVisible] = useScrollBlockingOverlay()

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>Open</ActionButton>
      <Overlay
        visible={visible}
        bg="rgba(150, 150, 150, 0.5)"
        zIndex={100}
        top={0}
        right={0}
        bottom={0}
        left={0}>
        <Box padding={4} space={2} bg="white">
          <Text>I am an overlay</Text>
          <ActionButton onClick={() => setVisible(false)}>Close</ActionButton>
        </Box>
      </Overlay>
    </>
  )
}

Nested modals

Dark Mode

function Component() {
  const [parentVisible, setParentVisible] = useScrollBlockingOverlay()
  const [childVisible, setChildVisible] = useScrollBlockingOverlay()

  return (
    <>
      <ActionButton onClick={() => setParentVisible(true)}>Open</ActionButton>
      <Modal
        zIndex={100}
        visible={parentVisible}
        onClose={() => setParentVisible(false)}>
        Parent modal
        <ActionButton onClick={() => setChildVisible(true)}>Open</ActionButton>
        <Modal
          zIndex={100}
          visible={childVisible}
          onClose={() => setChildVisible(false)}>
          Child modal
        </Modal>
      </Modal>
    </>
  )
}function Component() {
  const [parentVisible, setParentVisible] = useScrollBlockingOverlay()
  const [childVisible, setChildVisible] = useScrollBlockingOverlay()

  return (
    <>
      <ActionButton onClick={() => setParentVisible(true)}>Open</ActionButton>
      <Modal
        zIndex={100}
        visible={parentVisible}
        onClose={() => setParentVisible(false)}>
        Parent modal
        <ActionButton onClick={() => setChildVisible(true)}>Open</ActionButton>
        <Modal
          zIndex={100}
          visible={childVisible}
          onClose={() => setChildVisible(false)}>
          Child modal
        </Modal>
      </Modal>
    </>
  )
}

Using maxWidth

Dark Mode

function Component() {
  const [visible, setVisible] = useScrollBlockingOverlay({ maxWidth: 800 })

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>Open</ActionButton>
      <Overlay
        visible={visible}
        bg="rgba(150, 150, 150, 0.5)"
        zIndex={100}
        top={0}
        right={0}
        bottom={0}
        left={0}>
        <Box padding={4} space={2} bg="white">
          <Text>
            I only open on small viewports with a maximum width of 800px.
            <br />I automatically hide if the viewport is resized.
          </Text>
          <ActionButton onClick={() => setVisible(false)}>Close</ActionButton>
        </Box>
      </Overlay>
    </>
  )
}function Component() {
  const [visible, setVisible] = useScrollBlockingOverlay({ maxWidth: 800 })

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>Open</ActionButton>
      <Overlay
        visible={visible}
        bg="rgba(150, 150, 150, 0.5)"
        zIndex={100}
        top={0}
        right={0}
        bottom={0}
        left={0}>
        <Box padding={4} space={2} bg="white">
          <Text>
            I only open on small viewports with a maximum width of 800px.
            <br />I automatically hide if the viewport is resized.
          </Text>
          <ActionButton onClick={() => setVisible(false)}>Close</ActionButton>
        </Box>
      </Overlay>
    </>
  )
}