Repository files navigation

A declarative component for conditional rendering. Copyreact-only-when, let it support TypeScript.

$ npm install --save @uiw/react-only-when

importOnlyfrom'@uiw/react-only-when'<Onlywhen={true}><h1>Here I Am</h1></Only>

import{If}from'@uiw/react-only-when/if'<Ifcondition={props.error}><h1>{props.error}</h1></If>

import{Switch,Case,Default}from'@uiw/react-only-when/switch'<Switch><Casecondition={age<6}>preschool</Case><Casecondition={age>=6}>primary school</Case><Default>you graduated</Default></Switch>

React component that renders the children if thecondition prop istrue.

import{If}from'@uiw/react-only-when';// Orimport{If}from'@uiw/react-only-when/if'<div><Ifcondition={props.error}render={()=>(<h1>{props.error}</h1>)}/><Ifcondition={props.error}><h1>{props.error}</h1></If></div>

Or you could just use plain #"auto" data-snippet-clipboard-copy-content="<div> {props.error && ( <h1>{props.error}</h1> )}</div>">

<div>{props.error&&(<h1>{props.error}</h1>)}</div>

importReact,{useState}from'react';importOnlyfrom'@uiw/react-only-when';exportdefaultfunctionApp(){const[show,setShow]=useState(true)return(<divclassName="app"><buttononClick={()=>setShow(!show)}>Toggle</button><Onlywhen={show}><h1>Here I Am</h1></Only></div>)}

<Switch />

import{Switch,Case,Default}from'@uiw/react-only-when/switch'<Switch><Casecondition={age<6}>preschool</Case><Caseas="div"condition={age>=6}>primary school</Case><Default>you graduated</Default></Switch>

importReact,{useState,Fragment}from'react';import{Switch,Case,Default}from'@uiw/react-only-when/switch'exportdefaultfunctionApp(){const[age,setAge]=useState(19)return(<Fragment><inputtype="range"onChange={(evn)=>setAge(Number(evn.target.value))}/>{age}<br/><Switch><Casecondition={age<6}>Preschool</Case><Casecondition={age>=6&&age<18}>Primary school</Case><Casecondition={age>=18&&age<60}>Went to college</Case><Default>you graduated</Default></Switch></Fragment>);}

importReact,{useState,Fragment}from'react';import{Switch,Case,Default}from'@uiw/react-only-when/switch'exportdefaultfunctionApp(){const[age,setAge]=useState(19)return(<Fragment><inputtype="range"onChange={(evn)=>setAge(Number(evn.target.value))}/>{age}<br/><Switch><Caseas="span"condition={age<6}>Preschool</Case><Caseas="em"condition={age>=6&&age<18}>Primary school</Case><Caseas="div"condition={age>=18&&age<60}>Went to college</Case><Defaultas="p">you graduated</Default></Switch></Fragment>);}

<Only /> props

<If /> Props

import{ReactElement}from'react';import{FC,PropsWithChildren}from'react';exportinterfaceIfProps{readonlycondition?:boolean;readonlyrender?:()=>ReactElement;}exportdeclareconstIf:FC<PropsWithChildren<IfProps>>;

<Switch /><Case /><Default /> Props

importtype{FC,PropsWithChildren}from'react';exportconstSwitch:FC<PropsWithChildren<{}>>;typeTagType=React.ElementType|keyofJSX.IntrinsicElements;interfaceCaseElementProps<TextendsTagType>{as?:T;readonlycondition?:boolean;}exporttypeCaseProps<TextendsTagType>=CaseElementProps<T>&React.ComponentPropsWithoutRef<T>;exportconstCase:<TextendsTagType>(props:CaseProps<T>)=>any;exportconstDefault:<TextendsTagType>(props:Omit<CaseProps<T>,'condition'>)=>import("react/jsx-runtime").JSX.Element;

Development

# Step 1, run first, listen to the component compile and output the .js file# listen for compilation output type .d.ts filenpm run watch# Step 2, development mode, listen to compile preview website instancenpm run start

npm run build

Contributors

License