ui-components icon indicating copy to clipboard operation
ui-components copied to clipboard

Auto-generated docs care about the name of the exported component

Open jpellizzari opened this issue 8 years ago • 0 comments

The react-docs module that automatically generates documentation from comments and prop types cares about the name of the default export. This causes issues with styled-components.

This will not build (but it should):

class Alert extends React.PureComponent {
  render() {
    return (
      <div>{this.props.children}</div>
    );
  }
}

const StyledAlert = styled(Alert)`
  width: 100%;
  background-color: red;
  visibility: ${props => (props.visible ? 'visible' : 'hidden')};
`;

export default StyledAlert;

But this will:

const StyledAlert = styled.div`
  background-color: red;
`;

/**
 * An alert...
 */
class Alert extends React.PureComponent {
  render() {
    return (
      <StyledAlert {...this.props}>{this.props.children}</StyledAlert>
    );
  }
}

export default Alert;

Exporting the exact class is the current work around (ie if the file is Alert.js, export a class called Alert)

jpellizzari avatar Sep 07 '17 16:09 jpellizzari