Alec Sibilia
Alec Sibilia

Reputation: 956

Should I define standard React PropTypes on my component?

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

Answers (2)

Shubham Khatri
Shubham Khatri

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

Shobhit Chittora
Shobhit Chittora

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

Related Questions