Reputation: 956
I'm working on a component library and I'm wondering if it would be best practice to define propTypes
that I know will be commonly used even if they're not custom props. I've seen it done in other react component libraries (namely Material-UI) but I'm not sure why...
For example:
Button.propTypes = {
className: PropTypes.string,
onClick: PropTypes.func,
...
type: PropTypes.string.isRequired
};
const Button = (props) => <button {...props} />;
Here I'd obviously want to include the type
property as it's custom to my implementation and is required by this component... but what about the other two? From my understanding, props like className
, onClick
are already defined on most (all?) DOM elements by React.
With that in mind, does React type-check native DOM element properties like onClick
(click()
) and className
when they are passed through to an HTML element?
If so, including them in the propTypes object of my parent component seems redundant if they're optional.
ANSWER
After doing some testing it seems like the answer is no, most of the native properties on HTML elements do not have type-checking supplied by React. Some have deprecation and other misc. warnings but, by-and-large, types are not enforced (or suggested) on native props so you SHOULD include them in your components.
See Shubham's Answer in the comments for more info...
Upvotes: 4
Views: 1963
Reputation: 281656
As per the documentation:
As your app grows, you can catch a lot of bugs with typechecking. React
PropTypes
exports a range of validators that can be used to make sure the data you receive is valid.When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons,
propTypes
is only checked in development mode.
The point of having proptypes is to let you know during development that certain props are received by a component and some of them may be required, without passing them your code will break
You might also use JavaScript extensions like Flow
or TypeScript
to typecheck your whole application which provide greater flexibility. Read this section on Static TypeChecking in the React docs for more details
Also considering you are asking if you should check native DOM element properties like onClick
and className
, you need to check these as well since they are not native DOM elements on your custom components but passed as props to it. Check this answer for more details
Upvotes: 3
Reputation: 1279
IMHO the whole point of having propTypes defined for a component is to help you ( and your fellow team mates ) document the component API you've created. This means that by reading the propTypes you can know what to send to a component for it to work as expected. Also props validation in DEV mode helps you when someone passes a different type for the prop defined.
So to answer your question, for a component library you should take that bullet and define your abstractions explicitly.
PS: you can always pass more props then defined in PropTypes, but then there are better patterns which you can incorporate.
Upvotes: 1