Popover

Custom Content

Use the content render prop to provide custom rendering control of the content. See our Render Props Guide for additional information, including important considerations and examples.

Light years star stuff harvesting star light citizens of distant epochs encyclopaedia galactica.
() => {
  const content = ({ props }) => {
    // Your root element must be a Popper component.
    // import { Popper } from 'react-popper';

    const Content = styled('div')(({ theme }) => ({
      ...componentStyleReset(theme),

      backgroundColor: theme.backgroundColor_dangerPrimary,
      color: theme.color_white,
      margin: theme.space_inset_sm,
      padding: theme.space_inset_lg,
      zIndex: theme.zIndex_100
    }));

    return (
      <Popper placement={props.placement}>
        {(popperProps) => {
          const contentProps = {
            ...props,
            ...popperProps
          };

          return (
            <Content {...contentProps} >
              <DemoContent />
            </Content>
          );
        }}
      </Popper>
    );
  };

  return (
    <DemoLayout>
      <Popover content={content} isOpen placement="bottom-start">
        <Button>Open Popover</Button>
      </Popover>
    </DemoLayout>
  );
}