React component previews

Brienne Wong
Brienne Wong
  • Updated

This feature is available for all plans. This is not available for legacy plans.

You can render your react components in your styleguides. This will allow you to see your components and code side by side.

Import NPM packages

1) Copy your NPM package from your package registry

2) In Code Resources in the Styleguide settings, paste your NPM package in the NPM Dependencies box

NPM dependencies in the Code Resources section of the Styleguide settings

3) Your react code will render properly in the code block.

Add React preview

1) In the toolbar, click Code

Code function hovered over in the toolbar

2) Select React Preview

Code preview options

3) Paste your code

React code preview box

4) You can now render your react components.

πŸ‘‰ Note: Viewers can play with and edit the code, but it won’t save or change the code for anyone else viewing the documentation.

React component rendered in zeroheight


Can I render components that are supported by private NPM packages?

At the moment, we only support public NPM packages. Supporting private NPM packages may be something we extend in the future.

Do I still need to use Storybook if I can preview my React code in zeroheight?

Storybook is helpful as a sandbox and QA tool. While the preview tool may reduce the need to use Storybook, you will still need to manually maintain your code snippets in both the code base and zeroheight.

Can I hide the code from viewers?

You can collapse the code panel and set it as the default; however, viewers can still expand the panel to view the code.

Was this article helpful?