Falcon UI

Portal

Portal component is a wrapper around React Portals and can be used in combination with other falcon-ui components (like Sidebar or Backdrop for example). Components rendered as Portal render into a new DOM node (<div>) that exists outside the DOM hierarchy of the parent component and gets appended to <body>.

 
<Toggle initial={false}>
  {({ on, toggle }) => (
    <React.Fragment>
      <Button onClick={toggle}>Show sidebar that renders as portal</Button>
      <Sidebar side="right" as={Portal} visible={on}>
        <H1 p="lg">Hello!</H1>
      </Sidebar>
      <Backdrop onClick={toggle} as={Portal} visible={on} />
    </React.Fragment>
  )}
</Toggle>