UNPKG

react-if-then-else-switch

Version:

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

3 lines (2 loc) 1.23 kB
import{jsx as e,Fragment as l}from"react/jsx-runtime";import r from"react";const IfElse=({children:e})=>{const l=r.Children.toArray(e);let n;const i=[];let t;if(l.forEach((e=>{r.isValidElement(e)&&("If"===e.type.displayName?n||(n=e):"ElIf"===e.type.displayName?i.push(e):"Else"===e.type.displayName&&(t||(t=e)))})),!n)return null;if(n.props.condition)return n.props.children;for(const e of i)if(e.props.condition)return e.props.children;return t?t.props.children:null};IfElse.displayName="IfElse";const If=({children:r})=>e(l,{children:r});If.displayName="If";const ElIf=({children:r})=>e(l,{children:r});ElIf.displayName="ElIf";const Else=({children:r})=>e(l,{children:r});Else.displayName="Else";const n=r.createContext(null),Switch=({value:l,children:i})=>{let t=null,a=null;return r.Children.forEach(i,(e=>{r.isValidElement(e)&&("Case"!==e.type.displayName||e.props.when!==l||t?"Default"!==e.type.displayName||a||(a=e):t=e)})),e(n.Provider,{value:l,children:t||a})};Switch.displayName="Switch";const Case=({children:r})=>e(l,{children:r});Case.displayName="Case";const Default=({children:r})=>e(l,{children:r});Default.displayName="Default";export{Case,Default,ElIf,Else,If,IfElse,Switch}; //# sourceMappingURL=index.esm.js.map