react proptypes

1npx react-native init MyApp --template react-native-template-typescript
2

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;

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  // An object that could be one of many types
15  optionalUnion: PropTypes.oneOfType([
16    PropTypes.string,
17    PropTypes.number,
18    PropTypes.instanceOf(Message)
19  ])
20};

1const FancyButton = React.forwardRef((props, ref) => (
2  <button ref={ref} className="FancyButton">
3    {props.children}
4  </button>
5));
6
7// You can now get a ref directly to the DOM button:
8const ref = React.createRef();
9<FancyButton ref={ref}>Click me!</FancyButton>;

1import PropTypes from 'prop-types';
2
3class Greeting extends React.Component {
4  render() {
5    return (
6      <h1>Hello, {this.props.name}</h1>
7    );
8  }
9}
10
11Greeting.propTypes = {
12  name: PropTypes.string
13};

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};