react-tsx

Headless primitives for react

If

<If /> with one/two children

If component allows to render children only if condition is true

import { If } from "@accio-ui/react-tsx";

<If test={condition}>
  <>Show me if conditioin is true</>
  <>Show me if conditioin is false</>
</If>;
/**
 * @prop {unknown} test - Condition to show if condition is truthy.
 * @prop {React.ReactNode | (arg: NonNullable<T>) => React.ReactNode} children - First child will be shown if condition is truthy, second one – if it is falsy.
 */

or use <Else /> and <IfElse /> and function-as-a-child to get access to NonNulable<typeof test> value

import { If, IfElse, Else } from '@accio-ui/react-tsx'

<If
 test={{arg: "A"}}
>
 {(data) => <>{data.arg}</>
 //              ^? { arg: string }
 <Else>B</Else>}
// will render "A"
<If test={false}>
 <>A</>
 <ElseIf test={true}>
  <>B</>
  <Else>C</Else>
 </ElseIf>
</If>
// will render "B"
<If test={false}>
 <>A</>
 <If.ElseIf test={false}>
  <>B</>
  <If.Else>C</If.Else>
 </If.ElseIf>
</If>
// will render "C"

<If /> with then and else

If component must have then or else props.

<If
 test={true}
 then={<>A</>}
 else={<>B</>}
/>
// will render "A"
<If
 test={false}
 then={<>A</>}
 else={<>B</>}
/>
// will render "B"
/**
 * @prop {unknown} test - Condition to show if condition is truthy.
 * @prop {React.ReactNode | (arg: NonNullable<T>) => React.ReactNode} then - Content to show if condition is truthy
 * @prop {React.ReactNode} else - Content to show if condition is falsy.
*/

<If /> with fallback

If component must have at least one child or fallback prop.

<If test={true} fallback={B}>
 A
</If>
// will render "A"
<If test={false} fallback={B}>
 A
</If>
// will render "B"
/**
* @prop {unknown} test - Condition to show if condition is truthy.
* @prop {React.ReactNode} children - Content to show if condition is truthy.
* @prop {React.ReactNode} fallback - Content to show if condition is falsy.

Switch

import { Switch } from "@accio-ui/react-tsx";

const union = "idle" | "loading" | "error" | "success";

<Switch expression={union} exhaustive>
  <Switch.Case value={"idle"}>Idle</Switch.Case>
  <Switch.Case value={"loading"}>Loading</Switch.Case>
  <Switch.Case value={"error"}>Error</Switch.Case>
  {/* <Switch.Case value={"success"}>Success</Switch.Case> */}
  {/* <Switch.Default>Default</Switch.Default> */}
</Switch>;
// will cause of type error because of `exhaustive` prop

Progress

• [x] <If />
  • [x] <ElseIf />
  • [x] <Else />
• [ ] <Switch />
• [ ] <Match />
• [ ] <For />

Credits

• React Velcro
  • react-loops
  • react-condition