question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

propTypes not informing description

See original GitHub issue

Describe the bug Probably not a bug, but I can’t figure out docspage esp in regards to slot proptypes informing description and

To Reproduce

/**
 * some cool docs
 */

export const Button = (props) => {
  return <Cb {...props} />
}
Button.propTypes = {
  actionType: PropTypes.oneOf(['positive', 'negative', 'neutral', 'error', 'warning']),
};

Expected behavior Something like this image

Actual image

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:14 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
ryanboswellcommented, Jan 4, 2020

Took me a bit, but I did eventually figure out how to get react-docgen running on the project by adding it to our custom babelrc file.

1reaction
ryanboswellcommented, Dec 17, 2019

For what it’s worth, I’m seeing more or less the same issue with my component and I’m definitely not using CRA, so unsure if that bug would affect my use-case.

This is what I end up with:

button-props-table

const Button = (props) => {
// Component stuff here.
};

Button.propTypes = {
  /**
   * Whether or not to center the button.
   */
  centerAlign: PropTypes.bool,
  /**
   * The color theme to apply to the button.
   */
  color: PropTypes.oneOf([...buttonColors, ...brandColors]),
  /**
   * Classes to apply to the column element to adjust it's responsive width.
   */
  columnClasses: PropTypes.string,
  /**
   * The classes to apply to the outer grid element.
   */
  gridClass: PropTypes.string,
  /**
   * The text the button should display.
   */
  text: PropTypes.string,
  /**
   * The URL the button should link to.
   */
  url: PropTypes.string,
  /**
   * Whether or not the button's link should open in a new tab.
   */
  urlOpenNewTab: PropTypes.bool,
  /**
   * The button variant to use.
   */
  variant: PropTypes.oneOf(variants),
};

Button.defaultProps = {
  centerAlign: true,
  color: 'upgrade',
  columnClasses: '',
  gridClass: '',
  text: '',
  url: '',
  urlOpenNewTab: false,
  variant: 'solid',
};

I did at least get one step closer than the original author by setting Button.defaultProps to get the defaults column working, but the descriptions are a no-go both in textual description and for showing the actual types.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Eslinter not detecting Defined prop-types for react component
The error message is saying that it can't find that rule. Since the prop-types rule is provided by a plugin, eslint-plugin-react , and...
Read more >
Typechecking With PropTypes - React
To run typechecking on the props for a component, you can assign the special propTypes property: import PropTypes from 'prop-types'; class Greeting extends ......
Read more >
Typechecking with PropTypes, Flow and TypeScript
Typechecking is a simple method to avoid potential errors in an application. We have talked about basic principles to avoid potential errors, ...
Read more >
ReactJs Typechecking with PropTypes | Ultimate Guide
When creating a React application, you may find that a prop needs to be structured and described to avoid faults and failures. A...
Read more >
Code components API reference | Learn Plasmic
description, No, A human-friendly description for what this component does; will be rendered as a helpful ... type, Yes, One of the supported...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found