How to use prop-types - 10 common examples

propTypes.bookingUnitType = oneOf([LINE_ITEM_NIGHT, LINE_ITEM_DAY, LINE_ITEM_UNITS]);

const requiredLineItemPropType = (props, propName, componentName) => {
  const prop = props[propName];

  if (!prop || prop === '') {
    return new Error(`Missing line item code prop from ${componentName}.`);
  }
  if (!/^line-item\/.+/.test(prop)) {
    return new Error(`Invalid line item code value ${prop} passed to ${componentName}.`);
  }
};

// Denormalised transaction object
propTypes.transaction = shape({
  id: propTypes.uuid.isRequired,
  type: propTypes.value('transaction').isRequired,
  attributes: shape({
    createdAt: instanceOf(Date),
    lastTransitionedAt: instanceOf(Date).isRequired,
    lastTransition: oneOf(TRANSITIONS).isRequired,

    // An enquiry won't need a total sum nor a booking so these are
    // optional.
    payinTotal: propTypes.money,
    payoutTotal: propTypes.money,

    lineItems: arrayOf(
      shape({
        code: requiredLineItemPropType,
        includeFor: arrayOf(oneOf(['customer', 'provider'])).isRequired,

import { Button, Row, Col, Form } from 'antd';
import { FieldArray, FastField } from 'formik';
import { drawerFormItemLayout } from '@/lib/const';
import Resource from './Form';
import PropTypes from 'prop-types';
import style from '@/components/workflow/component/index.module.less';

const FormItem = Form.Item;
const Fragment = React.Fragment;

class ResourceArray extends React.Component {
  static propTypes = {
    resourcesField: PropTypes.string,
    type: PropTypes.oneOf(['inputs', 'outputs']),
    update: PropTypes.bool,
    projectName: PropTypes.string,
    resources: PropTypes.array,
  };

  state = {
    visible: false,
  };

  getIntegrationName = _argument => {
    const reg = /^\$\.+/;
    const item = _.find(_argument, o => reg.test(o.value));
    // NOTE: get integration name from $.${namespace}.${integration}/data.integration/sonarQube.server
    if (item) {
      const value = _.get(item, 'value').split('/data.integration');
      const integration = value[0].split('.')[2];

module.exports.validationHOCFactory = defaultValidationErrors => (Component => {
    const ValidatedComponent = props => (
        
    );

    ValidatedComponent.propTypes = {
        validationErrors: PropTypes.object // eslint-disable-line react/forbid-prop-types
    };

    return ValidatedComponent;
});

// Optional step to finish up the drawing
  }

  reset() {
    console.warn("Please override reset() in your component.");
  }
};

exports.DrawingTool.propTypes = {
  baseCanvas: PropTypes.object,
  canvasPixelRatio: PropTypes.number,
  canvasCssWidth: PropTypes.number,
  canvasCssHeight: PropTypes.number,
  updateImageCallback: PropTypes.func,
  color: PropTypes.string,
  lineWidth: PropTypes.number,
};

}
        break;
      }
    }
  };

  render() {
    const { devices, ...otherProps } = this.props;
    return ;
  }
}

ElementBasedDeviceDedector.propTypes = {
  onChangeType: PropTypes.func.isRequired,
  devices: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string,
      breakpointPx: PropTypes.number,
    }),
  ),
};

ElementBasedDeviceDedector.defaultProps = {
  devices: [
    // below 768px
    {
      name: 'mobile',
      breakpointPx: 768,
    },
    // 768px - 991px
    {
      name: 'tablet',

);
  }
}

BlogListPanel.defaultProps = {
  chronological: true,
};

BlogListPanel.propTypes = {
  /* eslint-disable react/forbid-prop-types */
  classes: PropTypes.object.isRequired,
  /* eslint-enable react/forbid-prop-types */
  title: PropTypes.string.isRequired,
  posts: PropTypes.arrayOf(PropTypes.shape({
    fileName: PropTypes.string,
    posts: PropTypes.arrayOf(PropTypes.object),
  })).isRequired,
  chronological: PropTypes.bool,
};

export default withStyles(contentStyles, { withTheme: true })(BlogListPanel);

/* @flow */
import { bool, node, number, oneOf, oneOfType, string } from 'prop-types';
import { enumToArray } from '../utils';
import { ALIGN, APPEARANCE, FONT_WEIGHT } from './constants';

export const textPropTypes = {
  align: oneOf(enumToArray(ALIGN)),
  appearance: oneOf(enumToArray(APPEARANCE)),
  children: node.isRequired,
  color: string,
  fontWeight: oneOfType([oneOf(enumToArray(FONT_WEIGHT)), number]),
  inherit: bool,
  noMargins: bool,
  parentAs: string,
  truncate: oneOfType([bool, number, string])
};

// Notice: This property will override the initialID
  persistentID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  // The items to display in the dropdown.
  items: PropTypes.arrayOf(
    PropTypes.shape({
      // An optional classname for the menu item.
      className: PropTypes.string,
      // A required ID for each item
      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
      // The HTML (or text) to render for the list item.
      html: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
      // Whether or not the user can choose the item.
      selectable: PropTypes.bool,
      // The HTML (or text) to display when the option is selected. If this is
      // not provided, the value for the `html` property will be used.
      selectedHtml: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
    })
  ).isRequired,
  // The ID of the item that should be selected initially.
  initialID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  // When true, the width of the dropdown will match the width of the button.
  matchButtonWidth: PropTypes.bool,
  // An optional callback when an item is selected. Will receive an argument
  // containing the selected item as it was supplied via the items array.
  onItemSelection: PropTypes.func,
  // The nearest scrolling DOMNode that contains the dropdown. Defaults to
  // window. Also accepts a string, treated as a selector for the node.
  scrollContainer: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  // Will attach the scroll handler to the the direct parent of scrollContainer
  // if it matches this selector. Defaults to null.
  scrollContainerParentSelector: PropTypes.string,
  // Optional transition on the dropdown menu. Must be accompanied

selectedItems: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.string,
      PropTypes.number,
      PropTypes.bool,
      PropTypes.object
    ]),
    onChange: PropTypes.func.isRequired,
    options: PropTypes.arrayOf(PropTypes.any).isRequired,

    // optional properties
    fixedOptions: PropTypes.arrayOf(PropTypes.any),
    erasable: PropTypes.bool,
    displayOption: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    getOptionValue: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    filterOption: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    placement: PropTypes.string,
    disabled: PropTypes.bool,
    isError: PropTypes.bool,
    multiSelect: PropTypes.bool,
    inputTheme: PropTypes.string,
    onBlur: PropTypes.func,
    placeholder: PropTypes.string,
    closeOnSelect: PropTypes.bool,
    DropdownHeaderComponent: PropTypes.func,
    DropDownRenderComponent: PropTypes.func,
    DropDownLineItemRenderComponent: PropTypes.func
  };

  static defaultProps = {
    erasable: false,
    placement: 'bottom',

tooltipLeft: "-100%",
        arrowLeft: (arrowSize) => -arrowSize - 2,
    },
};


const Tooltip = createReactClass({
    propTypes: {
        show: PropTypes.bool.isRequired,
        className: PropTypes.string,
        arrowSize: PropTypes.number,
        borderColor: PropTypes.string,
        verticalPosition: PropTypes.oneOf(
            Object.keys(VERTICAL_CORNERS)
        ),
        horizontalPosition: PropTypes.oneOf(
            Object.keys(HORIZONTAL_CORNERS)
        ),
        horizontalAlign: PropTypes.oneOf(
            Object.keys(HORIZONTAL_ALIGNMNENTS)
        ),
        children: PropTypes.arrayOf(
            PropTypes.element
        ).isRequired,
        targetContainerStyle: PropTypes.any,  // style object
    },

    getDefaultProps: function() {
        return {
            className: "",
            arrowSize: 10,
            borderColor: "#ccc",