Table of Contents

URL: https://www.progressiverobot.com/react-react-proptypes/

As compilation (er…transpilation) becomes the defacto standard of the post ES5, JSX-leaning JS dev landscape—care of tools like Babel—there is a growing sentiment that it may be time to let go of our fair language's dynamic and coercive ways in favor of a more sensible, statically-typed way of doing things.

Which leads to questions like, "Sure, but where do I even start?"

The biggest camps are TypeScript (Microsoft) and Flow (Facebook), but if you're working in React you've already got a wonderful, low-maintenance alternative in your codebase that's as easy to implement as it is to learn.

				
					
import React, { PropTypes } from 'react';

Say hello to React.PropTypes, a developer-friendly tool for declaring and checking types. Sure, it handles all the primitives ( array, bool, func, number, object, string, symbol) easily enough:

				
					
function Nest({name}) {

  return (

    <div>

      We called it {name}.

    </div>

  );

}



Nest.propTypes = {

  name: PropTypes.string,

}



export default Nest;

But there's also enough depth under the hood to manage some pretty sophisticated verifications:

				
					
Nest.propTypes = {

  name: PropTypes.string,

  eggs: PropTypes.shape({

    species: PropTypes.string,

    femaleToMale: PropTypes.arrayOf(PropTypes.number),

    hobbies: PropTypes.oneOf(['swimming', 'stalking']),

  }),

}

All-in you get nine additional types to throw your props against:

  • node and element for all your DOM and React element needs
  • instanceOf for digging into prototypes
  • oneOf for lists of known potential values
  • oneOfType for lists of known potential types
  • arrayOf and objectOf for arrays and objects composed of a single type
  • shape for objects in the shape of a specific schema
  • and any for when you really don't want to check for a type

Furthermore, you can attach isRequired to any PropType declaration for added rigidity.

				
					
hobbies: PropTypes.oneOf(['swimming', 'stalking']).isRequired

Couple things to note, PropType checking is <^>disabled in production<^>, and it's only present as a guiding hand in development mode. It throws warnings, not errors.

👉 That's it. You're a type checking expert now. Don't abuse this new power in opinion convos.