PropTypes
This package exports a variety of useful prop-type validators for the Key Design System.
Table of Contents
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;