Flyout

Flyout is a headless utility component and if you need a similar component with pre-defined styles, you can use Popover, Tooltip or other similar components instead.

You can use Flyout with any interactive element on the page by passing its attributes and adding the content you want to render.

<Flyout>
  <Flyout.Trigger>
    {(attributes) => <Button attributes={attributes}>Show content</Button>}
  </Flyout.Trigger>
  <Flyout.Content>
    <View
      backgroundColor="primary"
      height={20}
      width={40}
      borderRadius="medium"
    />
  </Flyout.Content>
</Flyout>

Flyout opens after clicking the trigger element, but you can change this using the triggerType property.

<Flyout triggerType="hover">
  <Flyout.Trigger>
    {(attributes) => <Button attributes={attributes}>Show content</Button>}
  </Flyout.Trigger>
  <Flyout.Content>
    <View
      backgroundColor="primary"
      height={20}
      width={40}
      borderRadius="medium"
    />
  </Flyout.Content>
</Flyout>

You can define the position where you want to display the Flyout. If it doesn't fit on the screen, it will automatically pick a better position within the viewport.

<Flyout position="bottom-end">
  <Flyout.Trigger>
    {(attributes) => <Button attributes={attributes}>Show content</Button>}
  </Flyout.Trigger>
  <Flyout.Content>
    <View
      backgroundColor="primary"
      height={20}
      width={40}
      borderRadius="medium"
    />
  </Flyout.Content>
</Flyout>

You can control which positions should be used as fallbacks with the fallbackPositions array. Pass false or an empty array to lock the position and prevent any fallbacks from being used.

<Flyout position="bottom-end" fallbackPositions={false}>
  <Flyout.Trigger>
    {(attributes) => <Button attributes={attributes}>Show content</Button>}
  </Flyout.Trigger>
  <Flyout.Content>
    <View
      backgroundColor="primary"
      height={20}
      width={40}
      borderRadius="medium"
    />
  </Flyout.Content>
</Flyout>

You can control the width of the Flyout content with the width property. You can pass a specific literal value or trigger to align the Flyout content width with its trigger.

<Flyout width="calc(var(--rs-unit-x1) * 100)">
  <Flyout.Trigger>
    {(attributes) => <Button attributes={attributes}>Show content</Button>}
  </Flyout.Trigger>
  <Flyout.Content>
    <View backgroundColor="primary" height={20} borderRadius="medium" />
  </Flyout.Content>
</Flyout>

If you pass the defaultActive flag to the component, it will open the Flyout on mount and use its internal state afterward.

If you pass the active flag, the controlled mode will be activated, and you will need to manage the component's state manually. This means you must control the state using onOpen and onClose handlers, allowing you to add custom logic before updating the state.

• It's essential to pass the attributes provided by the Flyout component to your interactive trigger component. This ensures that all user events and aria attributes are assigned correctly.

• Flyout traps the focus in its content area, but you can control how this is applied with the trapFocusMode property. It applies a regular focus trap with Tab key navigation enabled by default. You can switch it to action-menu or content-menu modes to make it work like a listbox or a regular content area with links.

• Use initialFocusRef to specify an element that should be focused once the Flyout is active for easier keyboard navigation. By default, Flyout moves focus to the first focusable element within its content.