Skip to content

uiwjs/react-only-when

Repository files navigation

react-only-when

Buy me a coffee Build & Deploy npm bundle size npm version Coverage Status

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