@decisiv/prop-types

PropTypes

This package exports a variety of useful prop-type validators for the Key Design System.

Table of Contents

• Installation
• Validators
  • forbiddenIf
  • requireAllOrNoneOf
  • requireAtLeastOneOf
  • requireIfDefined
  • requireIf

Installation

yarn add @decisiv/prop-types

Validators

forbiddenIf

Used inside of a component's propTypes declaration object as the validator itself for a given prop. Takes two arguments: a validator and a conditional. Allows you to conditionally forbid a prop value based on other props/logic. The prop is forbidden if the condition returns true.

Example use:

import { forbiddenIf } from '@decisiv/prop-types';

const propTypes = {
  text: forbiddenIf(PropTypes.string, (props) => !!props.icon),
  icon: forbiddenIf(PropTypes.string, (props) => !!props.text),
};

YourComponent.propTypes = propTypes;

requireAllOrNoneOf

Takes an object containing props with validators. Will error if values for some props are defined, but not if either all or none of the props are provided.

Example use:

import { requireAllOrNoneOf } from '@decisiv/prop-types';

const propTypes = {
  action: PropTypes.string,
  actionIcon: PropTypes.string,
};

requireAllOrNoneOf(propTypes);

YourComponent.propTypes = propTypes;

requireAtLeastOneOf

Takes an object containing props with validators. Will error if none of the props are provided, but not if values are provided for one or more of the props.

Example use:

import { requireAtLeastOneOf } from '@decisiv/prop-types';

const propTypes = {
  text: PropTypes.string,
  icon: PropTypes.string,
};

requireAtLeastOneOf(propTypes);

YourComponent.propTypes = propTypes;

requireIfDefined

Used to validate that one or more props are required if a different prop is defined.

Example use:

import { requireIfDefined } from '@decisiv/prop-types';

const propTypes = {
  text: PropTypes.string,
  icon: PropTypes.string,
};

requireIfDefined('foo', propTypes);

YourComponent.propTypes = propTypes;

requireIf

Used inside of a component's propTypes declaration object as the validator itself for a given prop. Takes two arguments: a PropTypes validator and a predicate function. This allows you to conditionally require a prop value based on other props/logic. The prop is required (and the supplied validator is applied to the prop) if the predicate function returns true.

Example use:

import { requireIf } from '@decisiv/prop-types';

const propTypes = {
  text: requireIf(PropTypes.string, (props) => !props.icon),
  icon: requireIf(PropTypes.string, (props) => !props.text),
};

YourComponent.propTypes = propTypes;