Storybook IntegrationStorybook creates an interface where you can visualise your React app’s components easily and play with them by modifying its properties and making changes for better design.
The supported components for Storybook are: Input, Radio, Button (LeftIconButton, RightIconButton), CheckBox, SelectArea and TextArea.
Step 1:Create a React app using DhiWise.
Once your app is setup, click on
A dialog box will appear for Storybook Setup, there are two options:
- With storybook: Code generator with Storybook
- Without storybook: Code generator without Storybook
With storybook to integrate Storybook into your application. Once you click there, your project will start to build.
Once your application is built, download your code.
To install and initialize dependencies, run the below command:
npx storybook init
To run Storybook use the following command:
npm run storybook
As you run your code,
Here you can see a list of common components of your application.
Easily configure the Actions, Controls, and Interactions on a button, and also modify them from Canvas area.
You can see in detail the properties description from Docs area.
At this stage, you have successfully integrated Storybook into your React app.
Got a question? Ask here.