react-if-then-else-switch/dist/index.d.ts

A React library for declarative conditional rendering using If/Else and Switch/Case components for cleaner JSX.

import React from 'react';

/**
 * Props for the IfElse component.
 * @typedef {object} IfElseProps
 * @property {React.ReactNode} children - Should contain one If component, zero or more ElIf components, and optionally one Else component.
 */
interface IfElseProps {
    children: React.ReactNode;
}
/**
 * Props for the If component.
 * @typedef {object} IfProps
 * @property {boolean} condition - The condition to evaluate.
 * @property {React.ReactNode} children - The child components to render when the condition is true.
 */
interface IfProps {
    condition: boolean;
    children: React.ReactNode;
}
/**
 * Props for the ElIf component.
 * @typedef {object} ElIfProps
 * @property {boolean} condition - The condition to evaluate if preceding If/ElIf conditions were false.
 * @property {React.ReactNode} children - The child components to render when this condition is true.
 */
interface ElIfProps {
    condition: boolean;
    children: React.ReactNode;
}
/**
 * Props for the Else component.
 * @typedef {object} ElseProps
 * @property {React.ReactNode} children - The child components to render.
 */
interface ElseProps {
    children: React.ReactNode;
}
/**
 * Props for the Switch component.
 * @typedef {object} SwitchProps
 * @property {any} value - The value to match against 'Case' components.
 * @property {React.ReactNode} children - The 'Case' and 'Default' components.
 */
interface SwitchProps {
    value: any;
    children: React.ReactNode;
}
/**
 * Props for the Case component.
 * @typedef {object} CaseProps
 * @property {any} when - The value to match against the Switch's value.
 * @property {React.ReactNode} children - The child components to render when the 'when' prop matches.
 */
interface CaseProps {
    when: any;
    children: React.ReactNode;
}
/**
 * Props for the Default component.
 * @typedef {object} DefaultProps
 * @property {React.ReactNode} children - The child components to render if no Case matches.
 */
interface DefaultProps {
    children: React.ReactNode;
}
/**
 * IfElse component acts as a wrapper for If, ElIf, and optional Else components.
 * It evaluates conditions sequentially and renders the children of the first
 * component (If or ElIf) whose condition is true. If no condition is met,
 * it renders the children of the Else component if provided.
 *
 * @param {object} props - The component props.
 * @param {React.ReactNode} props.children - Expected to contain an <If> component,
 * zero or more <ElIf> components, and optionally an <Else> component.
 */
declare const IfElse: React.FC<IfElseProps>;
/**
 * If component for conditional rendering.
 * This component *must* be a direct child of 'IfElse' and takes a 'condition' prop.
 * Its children are rendered if its condition is true and no preceding If/ElIf condition was true.
 */
declare const If: React.FC<IfProps>;
/**
 * ElIf (Else If) component for conditional rendering.
 * This component *must* be a direct child of 'IfElse' and takes a 'condition' prop.
 * Its children are rendered if its condition is true and all preceding If/ElIf conditions were false.
 */
declare const ElIf: React.FC<ElIfProps>;
/**
 * Else component for conditional rendering, used in conjunction with 'IfElse'.
 * This component *must* be a direct child of 'IfElse'.
 * Its children are rendered if all preceding If/ElIf conditions within 'IfElse' were false.
 */
declare const Else: React.FC<ElseProps>;
/**
 * Switch component for conditional rendering based on a value.
 * It takes a 'value' prop and provides it to its 'Case' children via context.
 * It renders the first 'Case' component whose 'when' prop matches the 'value',
 * or the 'Default' component if no 'Case' matches.
 */
declare const Switch: React.FC<SwitchProps>;
/**
 * Case component for conditional rendering within a 'Switch'.
 * Renders its children if its 'when' prop matches the 'value' provided by the parent 'Switch'.
 */
declare const Case: React.FC<CaseProps>;
/**
 * Default component for 'Switch', similar to a 'default' case in a JavaScript switch statement.
 * Renders its children if no 'Case' components in the parent 'Switch' match the value.
 */
declare const Default: React.FC<DefaultProps>;

export { Case, Default, ElIf, Else, If, IfElse, Switch };