function Example() { const { active, activate, deactivate } = useToggle(false); return ( <> <Button onClick={activate}>Show photo</Button> <Overlay active={active} onClose={deactivate}> <Image src="/img/examples/image-retina.webp" width="300px" borderRadius="medium" /> </Overlay> </> ); }
Overlay is a controlled component, meaning it has an active property and multiple handlers to change this property's value. Once Overlay is active, it will prevent scrolling of the entire page and only support scrolling for the content displayed inside the Overlay.
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 to be animated together with the Overlay, use the render props pattern from React. With this approach, the children property is 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 provide a useToggle hook that you can use with Overlay or other components that toggle states.