react-docgen-styled-component-resolver

Usage

const docgen = require('react-docgen');
const styledResolver = require('react-docgen-styled-component-resolver');
const source = require('some-source-code-file');

docgen.parse(source, styledResolver);

Example Usage Script

The included example script will output the result of parsing the prop-types to the example-output directory.

~ npm run example

example-output
├── CustomDiv.json
├── ReactComponent.json
└── SingleComponent.json

Parse props of exported styled-component.

import styled from "styled-components";
import PropTypes from "prop-types";

const propTypes = {
  /** some description for foo prop */
  foo: PropTypes.string
};

const defaultProps = {
  foo: "bar"
};

/** some description of Component here */
const Component = styled.div`
  margin: 0;
`;

Component.propTypes = propTypes;
Component.defaultProps = defaultProps;
Component.displayName = "SingleComponent";

export default Component;

Parse react and styled-components props in a single file.

import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";

const styledPropTypes = {
  /** some description */
  foo: PropTypes.string
};

const styledDefaultProps = {
  foo: "bar"
};

/** some description for custom Div styled component */
export const Div = styled.div`;
  margin: 0;
`;

Div.propTypes = styledPropTypes;
Div.defaultProps = styledDefaultProps;
Div.displayName = "CustomDiv";

const propTypes = {
  /** some description for react bar prop */
  bar: PropTypes.bool,
  /** some description for react children prop */
  children: PropTypes.node
};

const defaultProps = {
  bar: false,
  children: null
};

const ReactComponent = props => (
  <div {...props}>{props.children}</div>
);

ReactComponent.propTypes = propTypes;
ReactComponent.defaultProps = defaultProps;

export default ReactComponent;