react-proptype-conditional-require

    1.0.4 • Public • Published

    build status npm version license Coverage Status

    react-proptype-conditional-require

    Conditionally require propTypes based on other props and variables.

    getting started

    $ npm install --save react-proptype-conditional-require
    

    example

    import React, { PropTypes } from 'react';
    import isRequiredIf from 'react-proptype-conditional-require';
     
    const Hello = props => <div className={props.className}>Hello {props.value}!</div>;
     
    Hello.defaultProps = {
      value: 'World'
    };
     
    const { string } = PropTypes;
     
    Hello.propTypes = {
      value: string
      className: isRequiredIf(string, (props, propName, componentName) => props.hasOwnProperty('value'))
    };

    syntax

    This is a function that accepts a propType (a typeValidator function) and a condition in which to enforce this propType for React components. The function uses the signature:

    import isRequiredIf from 'react-proptype-conditional-require';
     
    ...
     
    Component.propTypes = {
      foo: isRequiredIf(typeValidator, conditional[, message])
    }
     

    usage

    typeValidator

    A function that takes the arguments (props, propName, componentName) and returns an Error object if the validation fails. Do not console.warn or throw.

    • props - An object containing all of the props passed to the instance.
    • propName - The current key of the prop object under validation.
    • componentName - The class of the React component.

    NOTE: All of the React built-in proptypes use this signature and you will usually use them to specify the typeValidator:

    import React, { PropTypes } from 'react';
    import isRequiredIf from 'react-proptype-conditional-require';
     
    const { string, bool } = PropTypes;
     
    ...
     
    Component.propTypes = {
      first: isRequiredIf(string, true),
      second: isRequiredIf(bool, false)
    }
     
    ...

    conditional

    A boolean or function that returns a truthy value that indicates whether the prop is required or not. The function follows the same signature as the typeValidator function: (props, propName, componentName). It should return a boolean, but any truthy value will do.

    A common use case:

    import React, { PropTypes } from 'react';
    import isRequiredIf from 'react-proptype-conditional-require';
     
    const { string } = PropTypes;
     
    ...
     
    Component.propTypes = {
      label: string,
      labelClassName: isRequiredIf(string, props => props.hasOwnProperty('label'));
    }
     
    ...

    In that case, the labelClassName will only be required if label is passed.

    message (optional)

    A string that specifies the custom error message that you would like to provide if the prop is required but missing. If not provided, the error message used by React will be default.

    import React, { PropTypes } from 'react';
    import isRequiredIf from 'react-proptype-conditional-require';
     
    const { string } = PropTypes;
     
    ...
     
    Component.LABEL_CLASSNAME_ERROR_MESSAGE = 'You must provide a labelClassName when passing down the label prop';
     
    Component.propTypes = {
      label: string,
      labelClassName: isRequiredIf(string, props => props.hasOwnProperty('label'), Component.LABEL_CLASSNAME_ERROR_MESSAGE);
    }
     
    ...

    The above code snippet would throw the custom error message if the label prop were passed but the labelClassName prop was not.

    license

    MIT License.

    Install

    npm i react-proptype-conditional-require

    DownloadsWeekly Downloads

    136,134

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • evcohen