react-docgen-to-json-schema

react-docgen-to-json-schema

Converts react-docgen output to JSON Schema.

Install

This module requires node >= 6.

npm install --save react-docgen-to-json-schema

Usage

Take this example React component.

import { Component } from 'react'
import PropTypes from 'prop-types'

/**
 * General component description.
 */
export default class MyComponent extends Component {
  static propTypes = {
    /**
     * Description foo.
     */
    foo: PropTypes.number.isRequired,

    /**
     * Description bar.
     *
     * - markdown list-item 1
     * - markdown list-item 2
     */
    bar: PropTypes.string,

    /**
     * Description baz.
     */
    baz: PropTypes.bool
  }

  static defaultProps = {
    bar: 'bar'
  }

  render: () => { }
}

react-docgen generates the following JSON:

{
  "description": "General component description.",
  "displayName": "MyComponent",
  "methods": [],
  "props": {
    "foo": {
      "type": {
        "name": "number"
      },
      "required": true,
      "description": "Description foo."
    },
    "bar": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Description bar.\n\n- markdown list-item 1\n- markdown list-item 2",
      "defaultValue": {
        "value": "'bar'",
        "computed": false
      }
    },
    "baz": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Description baz."
    }
  }
}

react-docgen-to-json-schema takes in this JSON and converts it to the following JSON Schema:

{
  "title": "MyComponent",
  "type": "object",
  "properties": {
    "foo": {
      "type": "number",
      "description": "Description foo."
    },
    "bar": {
      "type": "string",
      "description": "Description bar.\n\n- markdown list-item 1\n- markdown list-item 2",
      "default": "bar"
    },
    "baz": {
      "type": "boolean",
      "description": "Description baz."
    }
  },
  "required": [
    "foo"
  ]
}

API

reactDocgenToJSONSchema

Converts a single JSON object extracted by react-docgen to JSON Schema.

• input object JSON object documenting a single component.

Status

• PropTypes
• PropTypes.array
• PropTypes.bool
• PropTypes.func
• PropTypes.number
• PropTypes.object
• PropTypes.string
• PropTypes.symbol
• PropTypes.node
• PropTypes.element
• PropTypes.instanceOf
• PropTypes.oneOf (enums)
• PropTypes.oneOfType (unions)
• PropTypes.arrayOf
• PropTypes.objectOf
• PropTypes.shape
• PropTypes.any
• PropTypes isRequired
• PropTypes custom function
• PropTypes default values

Related

• JSON Schema - Official JSON Schema spec.
• React Docgen - Extracts docs from React source files.

License

MIT © Hydrate