@darwish/only-when

only-when

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

Quick Start

$ npm install --save @darwish/only-when

Usage

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

<If />

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

<Switch />

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

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

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

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.

License

MIT © sag1v & uiwjs