Question 74284 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to preview a React Portal component using storybook – Reactjs

I have this code:

index.html

...
<body>
  <div id="example-root"></div>
</body>
...

Component.tsx

...
const exampleRoot = document.getElementById("example-root")

function Component() {
  return ReactDOM.createPortal(<div>...</div>, exampleRoot)
}

Stories.tsx

...
const ExampleStory = () => (
  <>
    <div id="example-root"></div>
    <Component />
  </>  
)

I need to render <Component/> on storybook, but the problem is that <Component/> needs to find
the #example-root element to be rendered, but when I run the storybook it’s unable to find this root element and it can’t be rendered, but when I run the same code at normal page it works fine, except in storybook, so the problem is on storybook.

I think it’s happening because the <Component /> is mounted before the storybook, so the the component can’t find the #example-root element. A funny thing is that after everything has been rendered(component & storybook) if I do any change at <Component /> code and save it, then it works! The <Component /> find the root and is rendered.

So, how do I solve this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer for this

    If you need to render a component that is a React Portal, go to .storybook folder in your workspace, and then create a new file called preview-body.html, inside this file you just need to create the portal root tag, for example:

    // .storybook > preview-body.html

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

    Now your React Portal component is ready to be rendered in your story.


  2. 0

    it could be render by adding on Template, but it works only when the controls are changed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search