Overlay

Overlay is a controlled component which means that it has an active property and multiple handlers that you can use to change the value of this property. Once Overlay is active — it will prevent scrolling of the whole page and only support scrolling for the content displayed inside the Overlay.

Note: It's safe to keep Overlay in your render all the time. Overlay will be rendered in the DOM only if it is active. Rendering Overlay optionally will prevent its animation from working.

function Example() {
  const { active, activate, deactivate } = useToggle(false);

  return (
    <>
      <Button onClick={activate}>Open overlay</Button>
      <Overlay active={active} onClose={deactivate}>
        Overlay content
      </Overlay>
    </>
  );
}

Overlay component is animated, so if you want your children animated together with Overlay, you can use the render props pattern from React. With this approach, the children property is used as a function that returns an active flag. You can use this flag to set the state of the Overlay content.

function ExampleRenderProps() {
  const { active, activate, deactivate } = useToggle(false);

  return (
    <>
      <Button onClick={activate}>Open overlay</Button>
      <Overlay active={active} onClose={deactivate}>
        {({ active }) => (active ? "Active content" : "Hidden content")}
      </Overlay>
    </>
  );
}

To make it easier to control the state, we're providing a useToggle hook that you can use together with Overlay or other components that toggle states.