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>

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>

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

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>
  );
}

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>
  );
}