CODEWITHSUNDEEP
javascriptreactjsstorybookreact-portal
ANTARES_SEO
ANTARES_SEO

Reputation: 465

How to preview component with react portal using storybook.js

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

Error Image

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?

Upvotes: 6

Views: 5692

Answers (4)

Rahul C
Rahul C

Reputation: 11

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>

Upvotes: 1

Ariful
Ariful

Reputation: 121

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)

Upvotes: 0

ANTARES_SEO
ANTARES_SEO

Reputation: 465

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.

Upvotes: 1

sasa
sasa

Reputation: 459

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

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

Upvotes: 1

Related Questions