A declarative component for conditional rendering. Copy react-only-when, let it support TypeScript.
$ npm install --save @uiw/react-only-when
import Only from '@uiw/react-only-when' <Only when={true}> <h1>Here I Am</h1> </Only>
import { If } from '@uiw/react-only-when/if' <If condition={props.error}> <h1>{props.error}</h1> </If>
import { Switch, Case, Default } from '@uiw/react-only-when/switch' <Switch> <Case condition={age < 6}>preschool</Case> <Case condition={age >= 6}>primary school</Case> <Default>you graduated</Default> </Switch>
React component that renders the children if the condition prop is true.
import { If } from '@uiw/react-only-when'; // Or import { If } from '@uiw/react-only-when/if' <div> <If condition={props.error} render={() => ( <h1>{props.error}</h1> )} /> <If condition={props.error}> <h1>{props.error}</h1> </If> </div>
Or you could just use plain JavaScript:
<div> {props.error && ( <h1>{props.error}</h1> )} </div>
Only Example
import React, { useState } from 'react'; import Only from '@uiw/react-only-when'; export default function App() { const [show, setShow] = useState(true) return ( <div className="app"> <button onClick={() => setShow(!show)}>Toggle</button> <Only when={show}> <h1>Here I Am</h1> </Only> </div> ) }
import { Switch, Case, Default } from '@uiw/react-only-when/switch' <Switch> <Case condition={age < 6}>preschool</Case> <Case as="div" condition={age >= 6}>primary school</Case> <Default>you graduated</Default> </Switch>
import React, { useState, Fragment } from 'react'; import { Switch, Case, Default } from '@uiw/react-only-when/switch' export default function App() { const [age, setAge] = useState(19) return ( <Fragment> <input type="range" onChange={(evn) => setAge(Number(evn.target.value))} /> {age}<br /> <Switch> <Case condition={age < 6}>Preschool</Case> <Case condition={age >= 6 && age < 18}>Primary school</Case> <Case condition={age >= 18 && age < 60}>Went to college</Case> <Default>you graduated</Default> </Switch> </Fragment> ); }
Defaults to specifying a wrapped HTML Element.
import React, { useState, Fragment } from 'react'; import { Switch, Case, Default } from '@uiw/react-only-when/switch' export default function App() { const [age, setAge] = useState(19) return ( <Fragment> <input type="range" onChange={(evn) => setAge(Number(evn.target.value))} /> {age} <br /> <Switch> <Case as="span" condition={age < 6}>Preschool</Case> <Case as="em" condition={age >= 6 && age < 18}>Primary school</Case> <Case as="div" condition={age >= 18 && age < 60}>Went to college</Case> <Default as="p">you graduated</Default> </Switch> </Fragment> ); }
| prop name | type | default | isRequired | description |
|---|---|---|---|---|
| children | react element | null |
true |
A single child element |
| when | bool | false |
true |
When true, children will rendered as is |
| hiddenMode | string | null |
false |
Determines how children should be hidden |
| className | string | w-hidden |
false |
This is working in combination with hiddenMode={"css"} |
hiddenMode enum
| hiddenMode | description |
|---|---|
null |
Will not render the child |
display |
Will render the child with display:none |
visibility |
Will render the child with visibility:hidden |
css |
Will render the child with a CSS class (you can pass it a custom className prop) |
import { ReactElement } from 'react'; import { FC, PropsWithChildren } from 'react'; export interface IfProps { readonly condition?: boolean; readonly render?: () => ReactElement; } export declare const If: FC<PropsWithChildren<IfProps>>;
import type { FC, PropsWithChildren } from 'react'; export const Switch: FC<PropsWithChildren<{}>>; type TagType = React.ElementType | keyof JSX.IntrinsicElements; interface CaseElementProps<T extends TagType> { as?: T; readonly condition?: boolean; } export type CaseProps<T extends TagType> = CaseElementProps<T> & React.ComponentPropsWithoutRef<T>; export const Case: <T extends TagType>(props: CaseProps<T>) => any; export const Default: <T extends TagType>(props: Omit<CaseProps<T>, 'condition'>) => import("react/jsx-runtime").JSX.Element;
Runs the project in development mode.
# Step 1, run first, listen to the component compile and output the .js file # listen for compilation output type .d.ts file npm run watch # Step 2, development mode, listen to compile preview website instance npm run start
production
Builds the app for production to the build folder.
npm run build
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
As always, thanks to our amazing contributors!
Made with contributors.