A declarative component for conditional rendering. Copy react-only-when, let it support TypeScript.
$ npm install --save @darwish/only-whenimport Only from '@darwish/only-when';
<Only when={true}>
<h1>Here I Am</h1>
</Only>import { If } from '@darwish/only-when'
<If is={props.error}>
<h1>{props.error}</h1>
</If>import { Switch, Case, Default } from '@darwish/only-when'
<Switch>
<Case is={age < 6}>preschool</Case>
<Case is={age >= 6}>primary school</Case>
<Default>you graduated</Default>
</Switch>React component that renders the children if the is prop is true.
import { If } from '@darwish/only-when';
// Or
import If from '@darwish/only-when/if'
<div>
<If
is={props.error}
render={<h1>{props.error}</h1>}
/>
<If is={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 '@darwish/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 '@darwish/only-when/switch'
<Switch>
<Case is={age < 6}>preschool</Case>
<Case as="div" is={age >= 6}>primary school</Case>
<Default>you graduated</Default>
</Switch>import React, { useState, Fragment } from 'react';
import { Switch, Case, Default } from '@darwish/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 is={age < 6}>Preschool</Case>
<Case is={age >= 6 && age < 18}>Primary school</Case>
<Case is={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 '@darwish/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" is={age < 6}>Preschool</Case>
<Case as="em" is={age >= 6 && age < 18}>Primary school</Case>
<Case as="div" is={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 type { PropsWithChildren } from "react";
export default function If(props: {
is: boolean;
render: React.ReactNode;
}): JSX.Element;
export default function If(props: PropsWithChildren<{
is: boolean;
}>): JSX.Element | null;import type { PropsWithChildren } from "react";
type Label = keyof JSX.IntrinsicElements;
type TagProps<T extends Label> = JSX.IntrinsicElements[T];
type LabelProps<T extends Label> = {
as: T;
tagProps?: TagProps<T>;
};
export declare function Switch(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
interface CaseLabelProps<T extends Label> {
is?: boolean;
as: T;
tagProps?: TagProps<T>;
}
export declare function Case(props: PropsWithChildren<{
is?: boolean;
}>): JSX.Element;
export declare function Case<T extends Label>(props: PropsWithChildren<CaseLabelProps<T>>): JSX.Element;
export declare function Default(props: PropsWithChildren<{}>): JSX.Element;
export declare function Default<T extends Label>(props: PropsWithChildren<LabelProps<T>>): JSX.Element;
export {};Made with contributors.