react-custom-portal
This helps you if you want to render part of your component markup in some another place. It's a bit like html portal in react, but for general react markup.
const ExternalMarkup = const MyComponent = { <SomeMarkup> ... <ExternalMarkupContent> This text will not be rendered here but instead it will be rendered within ExternalMarkupRender </ExternalMarkupContent> ... </SomeMarkup>} const MySettings = { <AnotherMarkup> ... /* The content of <ExternalMarkup.Content ... /> will be rendered here */ <ExternalMarkupRender /> ... </AnotherMarkup>} const MyPage = { <ExternalMarkupRoot> ... <MyComponent /> ... <MySettings /> ... </ExternalMarkupRoot>}
By default <Portal.Render /> will render the content of all the <Portal.Content />s been rendered within the <Portal.Root />. If you want to tweak some things you can pass a function as the only child of <Portal.Render /> and it will be passed an array of <Portal.Content />s.
... <ExternalMarkupContent shape="circle" ... /> ... <ExternalMarkupContent shape="rectangle" ... /> ... <ExternalMarkupRender> children </ExternalMarkupRender> ...
createPortal
can be passed an options object with displayName
prop to tune the names of created components for debug purpose.
const Objects3DSettings = // now react tools displays "Objects3DSettings.Content" for <Objects3DSettings.Content ... /> instead of "Portal.Content"