Display the JSX of a React Storybook Story with the JSX Addon

Shawn Wang
InstructorShawn Wang
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Storybook has a rich Addons ecosystem that really adds a lot to the developer experience. Here I show how to set up the JSX Addon in Storybook to display the code behind React components. The juxtaposition of code and visual display can be very effective documentation for any users of your components.

Instructor: [00:01] First, we're going to install some dev dependencies for Storybook/Addons. In particular, we're going to use the JSXAddon.

[00:09] To configure the Addons, we're going to create a new file in the Storybook folder called Addons.js, then just declare our dependency StorybookAddonJSX/register, and that calls it within. Internally, this executes a registration function.

[00:28] Now over in config.js, we're going to import an additional function called setAddon from Storybook/React, and we're going to import JSXAddon from StorybookAddonJSX. Then we're just going to pair them together with setAddon, JSXAddon.

[00:50] That's all the setup we need to do. Now we can use this globally in any of those stories by just saying addWithJSX for any JSX component. Since we're using a React code base, this is basically all the components.

[01:07] Now when I run Storybook, and then I refresh on the right, I can see the JSX of whatever the component I'm demonstrating on the top.

Sung Kim
Sung Kim
~ 6 years ago

In case anyone's wondering, addWithJSX is exported from storybook-addon-jsx.

zapjelly
zapjelly
~ 5 years ago
aryyya
aryyya
~ 5 years ago

Why would you add storybook-addon-jsx as a dev dependency, and not a regular dependency, how would people view the JSX when using the storybook without it?

It seems like a lot of the packages that you've installed thus far in the course have been put in dev dependencies, but they are packages that provide code that is executed in production. I don't understand why you would do this. As far as I understand this would make the application error out immediately if you try to run it as a person who only installs the production assets.

BrightPixels
BrightPixels
~ 5 years ago

Why would you add storybook-addon-jsx as a dev dependency, and not a regular dependency, how would people view the JSX when using the storybook without it? It seems like a lot of the packages that you've installed thus far in the course have been put in dev dependencies, but they are packages that provide code that is executed in production. I don't understand why you would do this. As far as I understand this would make the application error out immediately if you try to run it as a person who only installs the production assets.

Can someone answer above question please

aryyya
aryyya
~ 5 years ago

@BrightPixels

My guess here is that, since storybook is meant to be used alongside a project to develop UI components in isolation, it is something meant for the developer to use in tandem with a project when developing it. When the components are created, they would be used in the actual application that they are being developed for. Since the production app wouldn't run or require the storybook, it makes sense to keep all storybook related packages as a development dependency.

Of course this all goes out the window if you're doing something like creating a storybook UI library for the sake of displaying the UI library itself (which is what is being done here), in that case everything should be a production dependency since the end user is interacting with the storybook to view the UI. Any of the projects displayed here would be examples of this: https://storybook.js.org/docs/basics/live-examples/

This is what makes most sense to me.

You've probably noticed that this course has a lot of out of date information. I'd suggest using the "feedback" button in the toolbar of the site to voice your complaints (if you have any) like I did. Nobody seems to be answering comments here at all.

BrightPixels
BrightPixels
~ 5 years ago

@aryyya Thanks for the quick reply. All makes sense. My use case is the latter, I am working on a UI library which need to be published.

BrightPixels
BrightPixels
~ 5 years ago

Anyone else having issues with the JSX addon? For me it doesn't display what I am expecting, i.e. the JSX with props used. But it's showing me the implenetation of the component. Please see screenshots. I am getting the same isseus when using the decorator and addwithjsx.

Screenshot of JSX addon panel: https://imgur.com/YogkOYa

Screenshot of the story: https://imgur.com/lYZishm

Screenshot of the component implenetation: https://imgur.com/4SLazwo

Screenshot of the config file: https://imgur.com/hXcigHa

Shawn Wang
Shawn Wanginstructor
~ 5 years ago

hey friends! sorry i am just seeing this feedback now. I am rerecording all the lessons so that you have up to date information. for @BrightPixels in particular, yes this was meant for local dev but of course promote to a full dependency as you needed (in fact i will do that upon rerecording).

as for your JSX issue, i can replicate it if i use a default export of an anonymous component as you have. in my video (and as best practice in general) i used a named export for Button so the component has a name.

BrightPixels
BrightPixels
~ 5 years ago

Another question Shawn (or anyone else who can help)

For one of my components, The JSX Addon is showing a prop that I didn't add but it looks like, it got it from the defaultProps which feels wrong to me, as I expect the JSX addon to show exactly how I used the component:

Screenshot of the Story which show how am using the component (without any props): https://imgur.com/WMF6S4p

Screenshot of how JSX Addon panel (which is showing a prop that I haven't used): https://imgur.com/bSrKOaf

Screenshot of the component's propTypes and defaultProps settings which is where I think JSX Addon has got the props from: https://imgur.com/sQMNo7f

The withInfo panel shows what I am expecting. Anyway to make the JSX Addon show the expected output?

BrightPixels
BrightPixels
~ 5 years ago

Any can help with above question please?

Shawn Wang
Shawn Wanginstructor
~ 5 years ago

@brightpixels I'm not sure, I can't quite reproduce what you're reporting. In any case I will fully rerecord this course this week. If you'd like to share a small repro i can investigate further, and you can contact me on twitter @swyx or on email swyx@netlify.com.

BrightPixels
BrightPixels
~ 5 years ago

@Shawn I have emailed you and DM'd you but so far go no replies. Not sure if my messages are getting through.

Markdown supported.
Become a member to join the discussionEnroll Today