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.

Args: Support dynamic PropTypes

See original GitHub issue

What

Inspect a component’s runtime propTypes to determine what to show in its ArgsTable

Why

Currently, Storybook extracts ArgTypes for JS React components using react-docgen. React-docgen performs a file-by-file static analysis of your components. This is efficient, generally well-supported, and is able to pull out things like JSDoc comments from the source code. However, it has a couple issues:

PropTypes can be functions, and these are difficult to analyze statically
PropTypes can be defined in separate files, and these are currently unsupported

By inspecting the runtime propTypes of a component and using this as a fallback (or combining it with the docgen?) we can overcome some of these problems.

We chose not to do this in the original implementation because it can easily obscure issues in the docgen setup. However, in practice many users want it, so we should consider adding this as part of React’s ArgType extraction.

User story

As a component developer,
I want Storybook to automatically dynamic PropTypes
So that I don't need to manually document them

Related issues

#13252 #12798 #12816

Issue Analytics

State:
Created 3 years ago
Reactions:53
Comments:17 (4 by maintainers)

Top GitHub Comments

11reactions

rohitnateshcommented, May 20, 2021

We tried setting up propTypes in a separate file and import it into the component file. But was disappointed as it does not work. 😦

Something like,

import propTypes from './propTypes';

....

Component.propTypes = propTypes;

...

6reactions

keenanthomsoncommented, Mar 28, 2022

Bumping this issue – generating dynamic PropType lists from imported enums would be a really valuable feature. Are there any plans to tackle this in 2022?

Top Results From Across the Web

PropTypes check of object with dynamic keys - Stack Overflow

PropTypes.shape({...}) . However, I recently came across a situation where I have an object that will have dynamic key/values inside.

Mastering React PropTypes - Level Up Coding

React components use a property called propTypes to set up type checking. This can be done for both functional and class-based components.

How to Use PropTypes in React - freeCodeCamp

Props are the read-only properties that are shared between components to give the unidirectional flow of React a dynamic touch.

Args - Storybook - JS.ORG

“Args” are Storybook's mechanism for defining those arguments in a single JavaScript object. Args can be used to dynamically change props, slots, styles,...

Mastering React PropTypes - Upbeat Code

When it comes to supported types. PropTypes package offers predefined validation functions. They cover most of the usual types.