Skip to main content

useOverlay

React Hook for creating overlays (for example, a list with dropdown options in the multi-select component).

Signature

useOverlay(): [TOverlayProvider, TOverlayContext]

Return value

Returns a tuple with the overlay provider (that's the element used for rendering the overlay) and the overlay context (that's the context where other components can render to).

Example

import { useOverlay } from "tripetto-runner-fabric/overlay";

function App() {
const [OverlayProvider, OverlayContext] = useOverlay();

return (
<>
<OverlayProvider />
<MultiSelectFabric
styles={{
backgroundColor: "white",
borderColor: "black",
errorColor: "red"
}}
overlay: OverlayContext
id: "1"
options={[
{
id: "1",
name: "Option 1"
},
{
id: "2",
name: "Option 2"
}
]}
/>
</>
);
}