How to preview component with react portal using storybook.js

Question

I implemented a Popper component using popper.js, and I used React's Portal to render popper element.

And now I want to preview my popper component, but It fails to create portal on storybook.js

Here's my approach.

.storybook/preview.js

import { ThemeProvider } from 'emotion-theming';
import { Global } from '@emotion/react';
import { theme, normalize } from 'custom-theme';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  Story => (
    <>
      <ThemeProvider theme={theme}>
        <Global styles={normalize} />
        {Story()}
        <div id="popper-root"></div>
      </ThemeProvider>
    </>
  ),
];

Portal.tsx

import { ReactNode, useMemo } from 'react';
import { createPortal } from 'react-dom';

interface IPortal {
  children: ReactNode;
  portalId: string;
}

const Portal = ({ children, portalId }: IPortal) => {
  const portalElement = useMemo<HTMLElement | null>(
    () => document.getElementById(portalId),
    [portalId],
  );

  if (!portalElement) {
    throw new Error(`Undefined Portal Id : ${portalId}`);
  }

  return createPortal(children, portalElement);
};

export default Portal;

Capture of Error Message

Is there any way to show component using react portal on storybook? If not, is there other way to preview it other than testing it on react project?

Levee

Answer 1

I was able to do a workaround on this by adding <div id="popper-root"></div> to my ComponentStory Template.

But One thing is if I render story with portal open, it cannot find popper-root.

Levee

Answer 2

Add preview-body.html, next to preview.js, with this:

<div id="popper-root"></div>

Gracious

Answer 3

For me, it worked when added a div in preview-body.html as shown below. In order to reflect that in the storybook you need to restart the storybook.

<div id="popper-root"></div>

Mince

Answer 4

I have got a root element id in storybook to use for the portal. And I have used it for the React/Next.js portal. Now it's working well.

• Storybook root element <div id="docs-root"></div>
• portal element selector document.getElementById('docs-root)

Benedict