Adding React Styleguidist to a Create React App application

Artem Sapegin
InstructorArtem Sapegin
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

React Styleguidist works with any React project, and supports Create React App out of the box. You’ll only need to tell it the location of your components, if it’s different from src/components. That’s enough to have basic documentation for all your components based on PropTypes, TypesScript or Flow type annotations.

Artem Sapegin: [0:00] First, install react-styleguidist from npm. Run styleguidist server to see if it works. Open the URL you see on the screen in your browser and you should see all your components in the left-side bar and their descriptions and props in the main area on the right.

[0:18] Each component that has props will have a table like this with its props. You see here the name, the type and the default value, if there is any. You also see a description that is taken from a comment in the code.

[0:30] If instead of your components you see an error message like this, it means your components aren't located at the default pattern styleguidist is using to find your components. In this case you need to create a config file.

[0:43] Let's create styleguide.config.js file and tell styleguidist where our components are located. This pattern says that we want all js files located in src/stuff folder, and also, we want to include all subfolders of src/stuff folder. Let's also change our styleguide title while we are here. Let's try it.

[1:06] Now we see all our components again. Let's set a couple of npm scripts for convenience. Open our package.json file and add two more npm scripts -- styleguide to run our styleguidist development server and styleguide:build to build a static HTML version of our styleguide.

[1:27] Now we can run styleguidist by running npm run styleguide and build the static HTML version by running npm run styleguide:build.

egghead
egghead
~ 3 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today