@decisiv/prop-types

PropTypes

This package exports a variety of useful proptype validators for use within 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 proptypes declaration object as the validator itself. Takes two arguments: a proptypes 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 valid proptypes. Will error if some props are defined, but not if either all or none of the props are defined.

Example use:

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

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

requireAllOfNoneOf(propTypes);

YourComponent.propTypes = propTypes;

requireAtLeastOneOf

Takes an object containing valid proptypes. Will error if none of the props are defined, but not if one or more are defined.

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 proptypes declaration object as the validator itself. Takes two arguments: a proptypes validator and a function. Allows you to conditionally require a prop value based on other props/ logic. The prop is required if the condition return 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;