Adding React Styleguidist to a Create React App application
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.