proptypes for a react component

1import React from 'react';
2import { PropTypes } from 'prop-types';
3
4const student = (props) => {
5  return (
6    <div>
7      <p>Student Name: {props.name}</p>
8      <p>Age: {props.age}</p>
9    </div>
10  );
11};
12
13student.propTypes = {
14  name: PropTypes.string,
15  age: PropTypes.number
16};
17
18export default student;

1npm install --save prop-types

1import PropTypes from 'prop-types';
2
3MyComponent.propTypes = {
4  // You can declare that a prop is a specific JS type. By default, these
5  // are all optional.
6  optionalArray: PropTypes.array,
7  optionalBool: PropTypes.bool,
8  optionalFunc: PropTypes.func,
9  optionalNumber: PropTypes.number,
10  optionalObject: PropTypes.object,
11  optionalString: PropTypes.string,
12  optionalSymbol: PropTypes.symbol,
13
14  // Anything that can be rendered: numbers, strings, elements or an array
15  // (or fragment) containing these types.
16  optionalNode: PropTypes.node,
17
18  // A React element.
19  optionalElement: PropTypes.element,
20
21  // A React element type (ie. MyComponent).
22  optionalElementType: PropTypes.elementType,
23
24  // You can also declare that a prop is an instance of a class. This uses
25  // JS's instanceof operator.
26  optionalMessage: PropTypes.instanceOf(Message),
27
28  // You can ensure that your prop is limited to specific values by treating
29  // it as an enum.
30  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
31
32  // An object that could be one of many types
33  optionalUnion: PropTypes.oneOfType([
34    PropTypes.string,
35    PropTypes.number,
36    PropTypes.instanceOf(Message)
37  ]),
38
39  // An array of a certain type
40  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
41
42  // An object with property values of a certain type
43  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
44
45  // An object taking on a particular shape
46  optionalObjectWithShape: PropTypes.shape({
47    color: PropTypes.string,
48    fontSize: PropTypes.number
49  }),
50
51  // An object with warnings on extra properties
52  optionalObjectWithStrictShape: PropTypes.exact({
53    name: PropTypes.string,
54    quantity: PropTypes.number
55  }),   
56
57  // You can chain any of the above with `isRequired` to make sure a warning
58  // is shown if the prop isn't provided.
59  requiredFunc: PropTypes.func.isRequired,
60
61  // A required value of any data type
62  requiredAny: PropTypes.any.isRequired,
63
64  // You can also specify a custom validator. It should return an Error
65  // object if the validation fails. Don't `console.warn` or throw, as this
66  // won't work inside `oneOfType`.
67  customProp: function(props, propName, componentName) {
68    if (!/matchme/.test(props[propName])) {
69      return new Error(
70        'Invalid prop `' + propName + '` supplied to' +
71        ' `' + componentName + '`. Validation failed.'
72      );
73    }
74  },
75
76  // You can also supply a custom validator to `arrayOf` and `objectOf`.
77  // It should return an Error object if the validation fails. The validator
78  // will be called for each key in the array or object. The first two
79  // arguments of the validator are the array or object itself, and the
80  // current item's key.
81  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
82    if (!/matchme/.test(propValue[key])) {
83      return new Error(
84        'Invalid prop `' + propFullName + '` supplied to' +
85        ' `' + componentName + '`. Validation failed.'
86      );
87    }
88  })
89};

1// proptypes using class component
2Detaljer.PropTypes = {
3  detaljer: PropTypes.string.isRequired,
4  feilkode: PropTypes.string,
5  removeEvent: PropTypes.string.isRequired
6};
7
8// proptypes using function component
9Detaljer.propTypes = {
10  detaljer: PropTypes.string.isRequired,
11  feilkode: PropTypes.string,
12  removeEvent: PropTypes.string.isRequired
13};

1//You can now use `PropTypes.elementType`
2// to validate for Component type props
3

1Basic types:
2- PropTypes.any: The prop can be of any data type
3- PropTypes.bool: The prop should be a Boolean
4- PropTypes.number: The prop should be a number
5- PropTypes.string: The prop should be a string
6- PropTypes.func: The prop should be a function
7- PropTypes.array: The prop should be an array
8- PropTypes.object: The prop should be an object
9- PropTypes.symbol: The prop should be a symbol
10
11Renderable types:
12- PropTypes.node: The prop should be anything that can be rendered by React
13  a number, string, element, or array (or fragment) containing these types
14- PropTypes.element: The prop should be a React element
15
16Instance types:
17- PropTypes.instanceOf(class): The prop should be an instance of class
18
19Multiple types:
20- PropTypes.oneOf: The prop is limited to a specified set of values,
21  treating it like an enum
22- PropTypes.oneOfType: The prop should be one of a specified set of
23  types, behaving like a union of types
24  
25Collection types:
26- PropTypes.arrayOf: ensures that the prop is an array in which all 
27  items match the specified type.
28- PropTypes.objectOf: ensures that the prop is an object in which all 
29  property values match the specified type.
30- PropTypes.shape: ensures that the prop is an object that contains a set 
31  of specified keys with values of the specified types.
32- PropTypes.exact: use for strict (or exact) object matching