Notorious Penguin Magicians
    Have ideas to improve npm?Join in the discussion! »

    react-docgen-props-schema

    1.0.2 • Public • Published

    react-docgen-props-schema

    Converts react-docgen output to JSON Schema.

    Install

    npm install --save react-docgen-props-schema

    Usage

    Take this example React component.

    import React from 'react';
    import PropTypes from 'prop-types';
    
    const ReactComonent = React.forwardRef((props = {}, ref) => {
      const { value, onChange, className, ...others } = props;
    
      return (
        <input
          type="date"
          ref={ref}
          className={className}
          value={value}
          onChange={onChange}
          {...others}
        />
      );
    });
    
    ReactComonent.propTypes = {
      /**
       * class for component
       */
      className: PropTypes.string,
      /**
       * size for component
       */
      size: PropTypes.oneOf(['sm', 'md', 'lg']),
      /**
       * value for component
       * @alias date-time
       */
      value: PropTypes.string,
      /**
       * onChange for component
       * @function
       * @name onChange
       * @param {string} value - value for component
       */
      onChange: PropTypes.func,
      /**
       * object for component
       */
      object: PropTypes.shape({
        value: PropTypes.number,
        label: PropTypes.string,
      }),
      /**
       * array for component
       */
      array: PropTypes.arrayOf(
        PropTypes.shape({
          value: PropTypes.number,
          label: PropTypes.string,
        }),
      ),
    };
    
    export default ReactComonent;

    react-docgen-props-schema generates the following JSON:

    {
      "description": "",
      "methods": [],
      "props": {
        "className": {
          "type": {
            "name": "string"
          },
          "required": false,
          "description": "class for component"
        },
        "size": {
          "type": {
            "name": "enum",
            "value": [
              {
                "value": "'sm'",
                "computed": false
              },
              {
                "value": "'md'",
                "computed": false
              },
              {
                "value": "'lg'",
                "computed": false
              }
            ]
          },
          "required": false,
          "description": "size for component"
        },
        "value": {
          "type": {
            "name": "string"
          },
          "required": false,
          "description": "value for component",
          "alias": "date-time"
        },
        "onChange": {
          "type": {
            "name": "func"
          },
          "required": false,
          "description": "onChange for component",
          "params": [
            "value"
          ]
        },
        "object": {
          "type": {
            "name": "shape",
            "value": {
              "value": {
                "name": "number",
                "required": false
              },
              "label": {
                "name": "string",
                "required": false
              }
            }
          },
          "required": false,
          "description": "object for component"
        },
        "array": {
          "type": {
            "name": "arrayOf",
            "value": {
              "name": "shape",
              "value": {
                "value": {
                  "name": "number",
                  "required": false
                },
                "label": {
                  "name": "string",
                  "required": false
                }
              }
            }
          },
          "required": false,
          "description": "array for component"
        }
      },
      "propsSchema": {
        "title": "",
        "type": "object",
        "properties": {
          "className": {
            "type": "string",
            "description": "class for component"
          },
          "size": {
            "type": "string",
            "description": "size for component",
            "enum": [
              "sm",
              "md",
              "lg"
            ]
          },
          "value": {
            "type": "string",
            "description": "value for component",
            "format": "date-time"
          },
          "onChange": {
            "type": "func",
            "description": "onChange for component",
            "params": [
              "value"
            ]
          },
          "object": {
            "type": "object",
            "description": "object for component",
            "properties": {
              "value": {
                "type": "number"
              },
              "label": {
                "type": "string"
              }
            }
          },
          "array": {
            "type": "array",
            "description": "array for component",
            "items": {
              "type": "object",
              "properties": {
                "value": {
                  "type": "number"
                },
                "label": {
                  "type": "string"
                }
              }
            }
          }
        }
      }
    }

    Status

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

    Babel

    npm install --D babel-plugin-react-docgen react-docgen-props-schema

    Use it inside your babel.config.js

    {
      "plugins": [
        [
          "react-docgen",
          {
            "handlers": [
              // absolute path to your react-docgen-props-schema file
              path.resolve(__dirname, "./node_modules/react-docgen-props-schema/handlers/propDocHandler.js"),
              path.resolve(__dirname, "./node_modules/react-docgen-props-schema/handlers/schemaHandler.js"),
            ],
          },
        ],
      ]
    }

    Related

    License

    MIT © Hydrate

    Install

    npm i react-docgen-props-schema

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    51.4 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar