React-app-styleguidist
react-styleguidist integration for create-react-app
Setup
If you already have project built with create-react-app, you need to do the following to get styleguides for your components:
npm install react-app-styleguidist --save-dev
- add the following line into your scripts section of your package.json:
"styleguide": "styleguidist server ./src/App.js"
Then run npm run styleguide
and you will see styleguide with your App
component. If you have different components structure, you should update this section according to your preferences, for example ./src/components/*.js
. It will build styleguide for all files that you have in your components
folder.
Also, there is an example
folder, that contains sample project with all necessary setup.
Customize styleguide
See react-styleguidist main documentation for more details.
Ejecting
For some more advanced features you might need to change some configuration options. This package supposed to be zero-configuration tool (except components paths), so you need to use react-styleguidist directly. To do this, you can run eject
command and follow the instructions in the terminal:
./node_modules/.bin/styleguidist eject
This command will add styleguide.config.js
with all previously used options, but now they are belong to yor project, so you can edit them.