Join us at Fortnox App Market today!

PropTypes in React.js

A React.js application is created by lots of components. These components get many specific attributes, just like a HTML tag does.
These attributes are called ”props” in React and can be of any type. It can be a string, function or an Array, as long as its valid javascript you can use it as a prop.

< MyComponent position="fixed" size={24}/> 
//position & size is props made up by the  author of that component.
//Using anything other than a string you need to wrap your props in {}

This flexibility is awesome but could also cause some problems. If I’m using a component written by another developer I have to figure out what props that component want, what’s required and also the correct type. React has a solution for this and its called propTypes. PropTypes defines type and which props are required. This benefits the future you and other developer using your component in two ways:

1. You can easily open up a component and check which props are required and what type they should be.
2. When things get messed up React will give you an awesome error message in the console, saying which props is wrong/missing plus the render method that caused the problem.

So how do we write these propTypes?

propTypes: {
  size: React.PropTypes.number,
  position: React.PropTypes.string.isRequired

As you can see React gives us defined propTypes. You can check them all out at:

When looking at that link you’ll spot a few other cool things. Say our position prop must have a value of ”fixed” or ”absolute”

     position: React.PropTypes.oneOf(['fixed', 'absolute'])

And even more cool, if we can’t find a PropType that suits our needs we can write own with regex or shapes:

propTypes: {
     email: function(props, propName, componentName) {
          if (!/emailRegex/.test(props[email])) {
               return new Error('Give me a real email!');
     user: React.PropTypes.shape({
                   name: React.PropTypes.string.isRequired,
                   age: React.PropTypes.number

Lastly I wanted to show you how a error message look like:


Thats all for now, take care!