React generates documents automatically through comments


Recently, I found some document generation tools and found thisReact StyleguidistThe corresponding documents can be generated automatically through comments, which is very convenient for react library


npm i -D react-styleguidist

// or

yarn add -D react-styleguidist

Typescript support

npm i -D react-docgen-typescript

To configure

This example uses CRA to create projects, and other projects are also supported by click reference

Create under root folderstyleguide.config.jsfile
You can use the following configuration

const path = require('path')

const packagePath = path.resolve(
const packageFile = require(packagePath)

module.exports = {
    Webbackconfig: require ('. / config / webback. Config'), // the path of webback can be created by using the one in the project or webback blocks
    Components: 'Src / component / * *. TSX', // write to the document of the corresponding directory
    propsParser: require('react-docgen-typescript').withCustomConfig(
    ). parse, // used to support TSX
    Verbose: true, // print details
    updateDocs(docs, file) {
        if (docs.doclets.version) {
            const version = packageFile.version

            docs.doclets.version = version
            docs.tags.version[0].description = version

        return docs
    }, // use the version of package.json when using @ version
    Version: packagefile.version, // same as the previous version using package.json
    Usagemode: 'expand', // automatically open the zoom of the document
    Pagepersection: true, // whether to display one component per page
    Title: "document name" // document name

For more specific configuration items, please refer to this reference

Writing notes

Example 1:

import React from 'react';

interface IProps {
   * user name
  name: string
   * age
  age?: number
   * work
   * @default doctor
  work?: string
   *Change name
   * @param name
  changeName?: (name: string) => void

 *Person component
 * @version package.json
 *Display of @ visiblename person component name
function Person(props: IProps) {
  return <div>Person</div>

export default Person;

Add use case:

    import Person from './Person';
    <Person name="grewer"/>


React generates documents automatically through comments

Example 2:

import React from 'react';

interface IProps {
  type: 'submit' | 'button'

   * Size
   *@ deprecated use size2 instead
  size?: 'small' | 'default'

   *New size
   * @since 1.1.0
   * @default large
  size2?: 'small' | 'large'

 *@ link [antd button] ( can be viewed
class Button extends React.Component<IProps, any> {
  static config = {
    Desc: "this is the static attribute"

   *Click event
   * @public
  clickHandle = (ev: Event) => {

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    return <div>{this.props.children}</div>

export default Button;


React generates documents automatically through comments


Use the following command to create a web service and modify the document online:

styleguidist server

Use the following command to package a document project

styleguidist build

If the library is on GitHub, it can be openedGitHub PagesFunction, submit the document package to GitHub;
View the result page of this example:


When you use react to develop and want to write documents, React StyleguidistAbsolutely one of the best
If your library is on GitHub, you can generate your document site immediately

Recommended Today

Spacemacs learning notes

install git clone ~/.emacs.d pacman -S emacs Change software source, edit.spacemacs, reference. Add the following code to the.spacemacsIndotspacemacs/user-init() (setq configuration-layer–elpa-archives ‘((“melpa-cn” . “”) (“org-cn” . “”) (“gnu-cn” . “”))) basic editing new file spc f f e path Save edits spc f s :w Close buffer spc b d Install the corresponding syntax extension […]