React Storybook Tutorial - 5 - Decorators

welcome back everyone in this video we are going to learn about decorators in storybook to understand what decorators are we first need to write some code that will help us understand the role of decorators our example is going to be really simple at the moment in our button stories you can see that the button is placed to the left of the screen what we want is to place the button at the center of the screen this can quite easily be achieved with css let's go back to vs code and write that code first we are going to create a new component which basically center aligns any content so in the components folder i'm going to create a new folder called center within this folder i'm going to create two new files center dot js and center dot css we don't really need a stories dot js file as this component is just a utility component in center.js i'm going to use the snippet rfce to create a function component we receive props and in the jsx on the div tag i'm going to add class name is equal to center and then render props dot children this center class is going to be written in our center dot css file so class center we're going to say display flex and justify content sender and then in center.js import the css at the top so import dot slash sender dot css now to use this component in button.stories.js file we first import it then we wrap every button story with the center component if you now take a look at the browser you can see that all the buttons are center aligned now if you look back at the code it is obvious that we want every story to be wrapped with this center component and that exactly is a decorator decorators are components that wrap a story in our case the center component is a decorator storybook however makes it easier for us to specify decorators by letting us write it once and be used for every story so in the default exports we can add an additional property called decorators and this is an array at the moment we just have the one decorator each entry in the array is a function that automatically receives the story as its argument we are then going to return the same story with parentheses which is now wrapped with the center component so wrap with the center component and then the children is going to be story with parentheses now we can get rid of these centered components for the individual button stories if i now take a look at the browser the buttons are still center aligned if you take a look at the input component this however is not center aligned so we need to add the decorator for input stories as well you can do that the same way we did with our button stories by adding it to the default export however at times we might have to add a decorator to every single story in our storybook for that we make use of global decorators to add global decorators we need to create a new file in the storybook folder this is called preview.js in this file we first make the necessary imports we're going to import react a function called add decorator from storybook and then the center component after making the imports we call this adddecorator function passing in the decorator so what we are saying is that for every story that we write please wrap it with the center component back in button dot stories we can remove this decorator's property and the import statement for center component and since we have made a change in the storybook folder we need to restart the server so yarn storybook if you now take a look at the browser you can see that every component is center aligned buttons as well as the input components in our example we have wrapped every component with the center component or in other words we have decorated every story with the center component this however is not the most practical application what is a really good practical application is using a theme provider as a global decorator so in the next video let's learn about theming in storybook

Channel: Codevolution

Views: 14,964

Rating: 4.9558825 out of 5

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Storybook, Storybook, Storybook React, React Storybook Tutorial, Storybook Tutorial

Id: djmAUrfMGQs

Length: 6min 20sec (380 seconds)

Published: Mon Aug 03 2020