React Utils Component

Motivation

This project is inspired by solidjs and vuejs.

Install Package

$ npm install react-utils-component

$ yarn add react-utils-component

Usage

Show

Component for conditional rendering.

ShowProps

Props|Type|Description ---|---|--- when|boolean|Conditions to be used for conditional rendering. fallback|JSX.Element \| undefined|Rendered when the condition is false. children|ReactNode|Rendered when the condition is true.

Switch-Match

This component is useful when there are multiple conditions like switch-case.

SwitchProps

Props|Type|Description ---|---|--- fallback|JSX.Element \| undefined|If all the conditions of the Match component, which is a child component, are not met, it is rendered. children|ReactNode|Locate Match Components

MatchProps

Props|Type|Description ---|---|--- when|boolean \| undefined|If true, the child component is rendered. children|ReactNode|Rendered when the condition is true.

List

This is a component inspired by methods in Array in javascript.

List.Map

It works the same as an Array's map.

Props|Type|Description ---|---|--- each|T[]|The array you want to iterate over. children|(item: T, index?: number) => U|The first argument contains an item of the same type as the single type of each. The second argument is index. Just return JSX.Element you want to iterate over.

List.Filter

It works the same as the Array's filter.

Props|Type|Description ---|---|--- each|T[]|The array you want to iterate over. predicate|(item: T) => boolean|A function that accepts up to one arguments. The filter method calls the predicate function one time for each element in the array. children|(item: T, index?: number) => U|The first argument contains an item of the same type as the single type of each. The second argument is index. Just return JSX.Element you want to iterate over.

Example

Show

const [role, setRole] = useState('user')

<Show when={role === "admin"} fallback={<p>Role is User</p>}>
  <p>Role is Admin</p>
</Show>

Switch-Match

const [role, setRole] = useState('user')

<Switch fallback={<p>This is Default Children</p>}>
  <Match when={role === "user"}>
    <p>User Component</p>
  </Match>
  <Match when={role === "admin"}>
    <p>Admin Component</p>
  </Match>
</Switch>

List.Map

const todos = [
  {
    userId: 1,
    id: 1,
    title: 'delectus aut autem',
    completed: false,
  },
  {
    userId: 1,
    id: 2,
    title: 'quis ut nam facilis et officia qui',
    completed: false,
  },
  {
    userId: 1,
    id: 3,
    title: 'fugiat veniam minus',
    completed: false,
  },
  {
    userId: 1,
    id: 4,
    title: 'et porro tempora',
    completed: true,
  },
  {
    userId: 1,
    id: 5,
    title: 'laboriosam mollitia et enim quasi adipisci quia provident illum',
    completed: false,
  },
];

<List.Map each={todos}>
  {(todo => (
    <li key={todo.id}>
      <h2>{todo.title}</h2>
    </li>
  ))}
</List.Map>

List.Filter

const todos = [
  {
    userId: 1,
    id: 1,
    title: 'delectus aut autem',
    completed: false,
  },
  {
    userId: 1,
    id: 2,
    title: 'quis ut nam facilis et officia qui',
    completed: false,
  },
  {
    userId: 1,
    id: 3,
    title: 'fugiat veniam minus',
    completed: false,
  },
  {
    userId: 1,
    id: 4,
    title: 'et porro tempora',
    completed: true,
  },
  {
    userId: 1,
    id: 5,
    title: 'laboriosam mollitia et enim quasi adipisci quia provident illum',
    completed: false,
  },
];

{/* Only render items for which `completed` is `true`. */}
<List.Filter
  each={todos}
  predicate={todo => todo.completed}
>
  {(todo => (
    <li key={todo.id}>
      <h2>{todo.title}</h2>
      <p>
        {todo.completed ? 'Completed!!!' : 'Not Completed'}
      </p>
    </li>
  ))}
</List.Filter>