@uiw/react-only-when

react-only-when

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

Quick Start

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

Usage

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>

<If />

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

<Switch />

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

<Only /> props

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)

<If /> Props

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

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

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;

Development

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!

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

MIT © sag1v & uiwjs