reactjs / reactjs/react-docgen
Complex composition using `PropTypes.shape`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.8k
- Forks
- 316
- Avg merge
- 5h 7m
- Merged PRs (30d)
- 4
Description
I have a component that looks something along the lines of
import A from './A';
import B from './B';
class MyComponent extends Component {
...
}
MyComponent.propTypes = {
aProps: PropTypes.shape(A.propTypes),
bProps: PropTypes.shape(B.propTypes),
...
};
Is there a way to make the parser detect that this is a composition rather than simple prop shapes?
I'm doing this because I don't want all the props to live on the wrapper component's scope but to contain each in their own prop, mainly to be able to distinguish what goes where so I don't accidentally pass props that both A and B may have but in reality shouldn't be the same like className, style, children, etc.
I would also like to know if this is possible:
import A from './A';
import VariantOfA from './VariantOfA';
class MyComponent extends Component {
...
}
MyComponent.propTypes = {
aProps: PropTypes.oneOfType([PropTypes.shape(A.propTypes),PropTypes.shape(VariantOfA.propTypes)])
...
};
In this scenario I want to be able to represent with a single prop both A and VariantOfA because essentially they are the same with minor differences in prop types.
I would assume this could be the same for PropTypes.arrayOf and PropTypes.objectOf since they're not that different from PropTypes.oneOfType
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no files, tests, or parser entry points, so first trace how PropTypes.shape, oneOfType, arrayOf, and objectOf are currently handled. Compare the requested nested and variant component examples with the generated documentation, and define the expected output and tests before implementation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- documentation, tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100