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"
          }
        ]}
      />
    </>
  );
}