Automatically Generate JSDoc for Your JavaScript and React Components

Common Challenges in React JS Development

Developers working with React often struggle with keeping documentation up to date. Manually adding JSDoc comments for each component is time-consuming, and missing documentation can make components harder to understand and reuse. This leads to inconsistent documentation across projects.

Introducing Quick-Gen React

Quick-Gen React automates JSDoc generation for React components. It scans project files, detects components, and extracts prop definitions, ensuring clear and structured documentation with minimal effort. Key features include batch file scanning and prop analysis, making it easy to maintain well-documented and readable code.

How to Use Quick-Gen React

Installation

To get started, install Quick-Gen React via npm:

npm install -g @quick-gen/react

Usage

Run the following command to generate JSDoc comments for your project:

quick-gen-react ./src

This will scan all React components in the ./src directory and generate JSDoc comments automatically.

Example

Before:

const Button = ({ onClick, children, disabled }) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
};

export default Button;

After Running Quick-Gen React:

/**
 * @generated 1700000000000
 * @component Button
 *
 * @param {Object} props Component props
 * @param {*} props.onClick - [auto generate]
 * @param {*} props.children - [auto generate]
 * @param {*} props.disabled - [auto generate]
 * @returns {JSX.Element} React component
 */
const Button = ({ onClick, children, disabled }) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
};

export default Button;

Links

• NPM Package: @quick-gen/react
• GitHub Repository: Quick-Gen React

Start using Quick-Gen React today and save time documenting your components effortlessly!

Comments

[Peter Vivo]

JSDoc main purpose: type safety like typescript.

This module looks using outdated JSDoc syntax which is too verbose. That why so many developers don't like the JSDoc. This declaration contain a too much noise.

/** 
  * @typedef {{
  *    onClick: (e: React.SyntheticEvent) => void,
  *    children: React.ReactNode,
  *    disabled: boolean, 
  * }} ButtonProps
  */

/** @type {(props: ButtonProps) => JSX.Element} */
export const Button = ({ onClick, children, disabled }) => (
    <button onClick={onClick} disabled={disabled}>
      {children}
    </button>
  );

children element proper type/TS

My advice is: better to avoid this module!