S
S
Sergey Suntsev2019-09-17 15:01:48
JavaScript
Sergey Suntsev, 2019-09-17 15:01:48

How to send component with react portal to storybook?

Actually there is a storybook with configs below

import {configure} from '@storybook/react'

import {configureActions} from '@storybook/addon-actions'
import 'style.scss'

const req = require.context('../src/shared/ui', true, /.stories.js?/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configureActions({
  depth: 100,
  limit: 20,
})

configure(loadStories, module)

There is a component with a portal. In the main application, there is a separate dom container Question: how to add the same container to the storybook ? <div id="select-root"></div>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey Suntsev, 2019-09-17
@GreyCrew

I decided in this way in the modal component itself I wrote the condition

componentDidMount() {
    if (!selectRoot) {
      const newNode = document.createElement('div')
      newNode.setAttribute('id', 'select-root')
      const rootNode = document.querySelector('#root')
      rootNode.after(newNode)
      newNode.appendChild(this.el)
    } else {
      selectRoot.appendChild(this.el)
    }
}

But I'm not sure if this option is good.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question