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

And now I want to preview my popper ponent, 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 ponent using react portal on storybook? If not, is there other way to preview it other than testing it on react project?

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

And now I want to preview my popper ponent, 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 ponent using react portal on storybook? If not, is there other way to preview it other than testing it on react project?

• javascript
• reactjs
• storybook
• react-portal

Share Improve this question Follow asked Jan 19, 2022 at 9:46 ANTARES_SEOANTARES_SEO 47577 silver badges99 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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

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

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.

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>

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)