React component previews

Brienne Wong
Brienne Wong
  • Updated

This feature is for all paid plans. This will not be 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.

React component rendered in zeroheight

FAQs

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 useful 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.

Was this article helpful?