reactjs
Support Object.assign in propTypes definition
In my React App, I have components which pass receive properties but just pass them as is to their child component. The parent component sort of extends the child component properties, so I'm using Object.assign to avoid code duplication. Unfortunately, recat-docgen doesn't seem to handle propTypes values which are evaluated from a function.
For example, let's say I have a component named ParentComponent and a component named ChildComponent.
The render function of the ParentComponent looks like this:
render() {
return (
<ChildComponent childPropA="SomeValue" childPropB="AnotherValue" />
);
}
When I render the ParentComponent my code looks like this:
<ParentComponent parentPropA="Value" childPropA="SomeValue" childPropB="AnotherValue" />
Therefore, I use Object.assign for setting ParentComponent.propTypes:
ParentComponent.propTypes = Object.assign({}, ChildComponent.propTypes, {
parentPropA: React.PropTypes.string
});
I guess we could special case Object.assign, but a quick solution would be to use:
ParentComponent.propTypes = {
...ChildComponent.propTypes,
parentPropA: React.PropTypes.string,
};
which react-docgen understands (and which is exactly the same).
Thanks! I believe that this is my most common case, then this solution should do.
With the new push for ES6 class syntax over the now-deprecated React.createClass(), this issue has become a little bit more prevalent. ES6 classes don't (yet) support static data members without a MyClass.myProp = ... outside of the main class definition. They do, however, support static getters, but that would mean returning something like propTypes from a function.
Full example:
class MyComponent extends React.Component {
static get propTypes() {
return {
...
}
}
}
vs.
class MyComponent extends React.Component {
}
MyComponent.propTypes = {
}
It would be really nice to be able to declare propTypes inside the ES6 class body and still have them be detected by react-docgen, although I still wouldn't call it absolutely essential.
@bsmith-cycorp: Sorry for not have followed up on this! You are right, static get propTypes() doesn't work but it definitely should. Feel free to open a new issue about this.
Unfortunately the the following syntax doesn't work:
import genericButtonProps from '../../common/buttons/genericButtonProps';
// ...
const buttonSpecificProps = {
onClick: PropTypes.func,
trigger: PropTypes.object,
type: PropTypes.oneOf(['submit', 'reset', 'button', 'menu']),
};
Button.propTypes = { ...genericButtonProps, ...buttonSpecificProps };
Only properties defined in buttonSpecificProps are serialized. Of course I've tried the approach with Object.assign but it doesn't work too. It would be really nice if I could import props from another file.
I also have hit this snag. It would be great if we could merge proptypes with spread operators / Object.assign
Does anyone know if anything has come of this? This would be an incredible feature.
Neither spread properties or object assign is working, is there a workaround ?
https://reactcommunity.org/react-docgen/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class MyParent extends Component {render() {}}
MyParent.propTypes = {
/**
* hello desc
*/
hello: PropTypes.number,
}
class MyComponent extends Component {render() {}}
MyComponent.propTypes = {
...MyParent.propTypes,
/**
* foo desc
*/
foo: PropTypes.number,
};
MyComponent.defaultProps = {
foo: 42
};
export default MyComponent;
