ReactJS PropTypes

ReactJS PropTypes

ReactJS is built around the concept of components. The components get many specific attributes just like a HTML tag does.

The attributes are called “props” in ReactJS 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. 

1
2
3

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

What is PropTypes?
PropTypes defines type and which props are required. This benefits the future you 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 ReactJS 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 the propTypes? 

1
2
3
4

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

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

1
2
3
4
5
6
7
8
9
10
11

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
  }).isRequired
}

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS PropTypes</title>
    <script src="react.js"></script>
    <script src="JSXTransformer.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var Profile = React.createClass({
        getDefaultProps: function() {
          return {
            name: 'This is a default prop',
            age: 0,
            activate: true
          }
        },
        propTypes: {
          name: React.PropTypes.string,
          age: React.PropTypes.number.isRequired,
          activate: React.PropTypes.bool.isRequired
        },
        render: function() {
          return(
            <div>
              <h1>Name: {this.props.name}</h1>
              <h1>Age: {this.props.age}</h1>
              <h1>Activate: {this.props.activate}</h1>
            </div>
          );
        }
      });

      React.render(<Profile name="Bunlong" age={0} activate={true} />, document.body);
    </script>
  </body>
</html>

So far so good, That’s it!!! See ya!!! :)