PropTypes

• проверка типов
• во время выполнения
• в development режиме
• prop-types

PropTypes - Install

npm install prop-types
    

PropTypes - Example

import React from 'react';
import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};
    

PropTypes - Basic Types

MyComponent.propTypes = {
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
};
    

PropTypes - Array

MyComponent.propTypes = {
  optionalArray: PropTypes.array,
  optionalArrayOf: PropTypes.arrayOf(
    PropTypes.number
  ),
};
    

PropTypes - Object

MyComponent.propTypes = {
  optionalObject: PropTypes.object,
  optionalObjectOf: PropTypes.objectOf(
    PropTypes.number
  ),
};
    

PropTypes - Node

MyComponent.propTypes = {
  // любой тип который React может отрендерить
  // число, строка, элемент или массив с ними
  optionalNode: PropTypes.node,
};
    

PropTypes - Element

MyComponent.propTypes = {
  // React-элемент
  optionalElement: PropTypes.element,
};
    

PropTypes - Class

MyComponent.propTypes = {
  optionalMessage: PropTypes.instanceOf(Message),
};
    

PropTypes - Enum

MyComponent.propTypes = {
  optionalEnum: PropTypes.oneOf(
    ['News', 'Photos']
  ),
};
    

PropTypes - Union

MyComponent.propTypes = {
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
};
    

PropTypes - Shape

MyComponent.propTypes = {
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
};
    

PropTypes - Required

MyComponent.propTypes = {
  requiredFunc: PropTypes.func.isRequired,
};
    

PropTypes - Any

MyComponent.propTypes = {
  requiredAny: PropTypes.any.isRequired,
};
    

PropTypes - Custom

MyComponent.propTypes = {
  custom: (props, propName, componentName) => {
    if (!/matchme/.test(props[propName])) {
      return new Error('Invalid prop');
    }
  },

  customArray: PropTypes.arrayOf(
    (propValue, key, componentName, location, propFullName) => {...}
  ),

  customObject: PropTypes.objectOf(
    ...
  )
};
    

PropTypes - Default

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

// Renders "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);