audriusk-wix / react-autodocs-utils Goto Github PK

View Code? Open in Web Editor NEW

Set of utilities for extracting meta information about react components mostly to generate automated documentation

JavaScript 99.05% TypeScript 0.95%

react-autodocs-utils's Introduction

React Autodocs Utils

A collection of tools for automating React components documentation.

Under development, may contain experiments

Install

npm i react-autodocs-utils --save-dev

Use

const reactAutodocsUtils = require('react-autodocs-utils');
const path = './path/to/react-component.js';
const componentMetadata = reactAutodocsUtils(path);

componentMetadata is an object with, unsurprisingly, metadata of component.

Example

given component.js:

import React from 'react';
import {oneOf, node} from 'prop-types';

export class Component extends React.PureComponent {
  static propTypes = {
    thing: oneOf(['first', 'second']),

    /** i am description about `children` prop */
    children: node.isRequired
  }

  render() {
    return <div/>;
  }
}

reactAutodocsUtils('./component.js') Will return a JSON:

{
  "props": {
    "thing": {
      "type": {
        "name": "enum",
        "value": [
          {
            "value": "'first'",
            "computed": false
          },
          {
            "value": "'second'",
            "computed": false
          }
        ]
      },
      "required": false,
      "description": ""
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": true,
      "description": "i am description about `children` prop"
    }
  },
  "description": "",
  "displayName": "Component",
  "methods": [],
  "readme": "source of `./readme.md` if exists, otherwise empty string",
  "readmeAccessibility": "source of `./readme.accessibility.md` if exists, otherwise empty string",
  "readmeTestkit": "source of `./readme.testkit.md` if exists, otherwise empty string"
}