React hooks documentation generator

Question

What is the best way to generate documentation for React hooks in .jsx and .tsx files?

I tried TypeDoc, but I do not get any comments from function methods.

const MainFunction = () => {

  /**
   * How to get generate this comment?
   * 
   * @param a first number
   * @param b second number
   * 
   * @returns sum of and b
   */
  const sumNumbers = (a, b) => {
    return a + b;
  }
}

Answer 1

I solved this with JSDoc and better-docs plugin.

Answer 2

Can't comment @OPearl question so I'll answer here, as it took me a while to figure it out and this seems to be the most pertinent post on the subject.

You can comment methods in functional component with better-docs but there are some limitations not quite clear from the docs.

@component

First of all the component needs to be tagged with the @component, which requires enabling the correspondent plugin, see docs. Tagging it with @component is going to give it a constructor status that lets you comment on methods and use other related tags like @memberOf

In order for the component to be displayed properly you need to export it separately after, so this is not going to work:

// Not working!
export default function Component()

Hooks

With the @component tag working you should be able to tag methods inside the component but it won't work with hooks. What you can do however is tag methods inside hooks by adding a @memberOf tag.

Example of working tagged methods in a functional component:

/**
 * Component comment
 *
 * @component
 */
function ExampleComponent(props) {
  /**
   * Method comment
   *
   * @param {string} foo - Foo description
   */
  function testFunction(foo) {
    // do something
  }

  useEffect(() => {
    /**
     * Method comment
     *
     * @param {number} bar - Bar description
     * @memberOf ExampleComponent
     */
    function testEffect(bar) {
      // do something
    }
    testEffect(1);
  }, []);

  return <div>foobar</div>;
}

export default ExampleComponent;