JB1905 / react-render-actions

💥 Set of JavaScript actions to use during component rendering

react-render-actions (WIP)

About

Set of JavaScript actions to use during component rendering

Demo

Playground – play with library in Storybook

Similar Projects

• React For by Michal Jez
• React If by Romain Ruetschi
• React Switch Case by Sergey

Contents

• How to Install
• Components
  • Conditions
    • If-Else
    • When
    • Unless
  • Functions
    • Map
    • Filter
    • Reduce
  • Loops
    • For
    • ForOf
    • ForIn
    • ForEach
    • While
    • DoWhile
  • Promises
  • Switch
  • Timeouts
    • SetTimeout
    • SetInterval

How to Install

First, install the library in your project by npm:

$ npm install react-render-actions

Or Yarn:

$ yarn add react-render-actions

Components

Conditions

If-Else

import { If, Then, Else } from 'react-render-actions';

<If condition={2 < 3}>
  <Then>
    <p>2 is smaller than 3</p>
  </Then>

  <Else>
    <p>2 isn't smaller than 3</p>
  </Else>
</If>

Available options

If

Param	Type	Default	Description
condition	() => boolean		condition to be met

When

import { When } from 'react-render-actions';

<When condition={2 < 3}>
  <p>2 is smaller than 3</p>
</When>

Available options

Param	Type	Default	Description
condition	() => boolean		condition to be met

Unless

import { Unless } from 'react-render-actions';

<Unless condition={2 > 3}>
  <p>2 isn't greater than 3</p>
</Unless>

Available options

Param	Type	Default	Description
condition	() => boolean		condition to be met

---

Functions

Map

import { Map } from 'react-render-actions';

<Map data={[1, 2, 3]}>
  {(item, index) => <p key={index}>{item}</p>}
</Map>

Available options

Param	Type	Default	Description
data	array		Data to map

Filter

import { Filter } from 'react-render-actions';

<Filter data={[1, 2, 3]} pattern={(item) => item !== 2}>
  {(filteredData) => <p>{JSON.stringify(filteredData)}</p>}
</Filter>

Available options

Param	Type	Default	Description
data	array		Data to filter
pattern	boolean		Filter pattern

Reduce

import { Reduce } from 'react-render-actions';

<Reduce data={[1, 2, 3]} pattern={(prev, next) => prev + next}>
  {(reducedValue) => <p>{reducedValue}</p>}
</Reduce>

Available options

Param	Type	Default	Description
data	array		Data to reduce
pattern	boolean		Reduce pattern

---

Loops

For

import { For } from 'react-render-actions';

<For start={0} comparator={(i) => i < 10} next={(i) => i++}>
  {(i) => <p key={i}>Hello World!</p>}
</For>

ForOf

import { ForOf } from 'react-render-actions';

<ForOf data={[1, 2, 3]}>
  {(i) => <p key={i}>{i}</p>}
</ForOf>

ForIn

import { ForIn } from 'react-render-actions';

const data = {
  name: 'John',
  age: '21',
  email: '[e-mail]',
};

<ForIn data={data}>
  {([key, value]) => <p key={key}>{key}: {value}</p>}
</ForIn>

ForEach

import { ForEach } from 'react-render-actions';

<ForEach data={[1, 2, 3]}>
  {(item) => <p>{item}</p>}
</ForEach>

While

import { While } from 'react-render-actions';

<While test={2 > 1}>
  <p>Hello World!</p>
</While>

DoWhile

import { DoWhile } from 'react-render-actions';

<DoWhile test={2 > 1}>
  <p>Hello World!</p>
</DoWhile>

---

Promises

import { RPromise, Resolve, Reject } from 'react-render-actions';

const promise = {}

<RPromise promise={promise}>
  <Resolve>
    <p>Resolved!</p>
  </Resolve>

  <Reject>
    <p>Rejected!</p>
  </Reject>
</RPromise>

---

Switch

import { Switch, Case, Default } from 'react-render-actions';

<Switch switchValue="banana">
  <Case case="apple">
    <p>Apple</p>
  </Case>

  <Case case="banana">
    <p>Banana</p>
  </Case>

  <Case case="pear">
    <p>Pear</p>
  </Case>

  <Case case="raspberry">
    <p>Raspberry</p>
  </Case>

  <Default>
    <p>Fruit not found</p>
  </Default>
</Switch>

Available options

Switch

Param	Type	Default	Description
switchValue	string		Switch value

Case

Param	Type	Default	Description
case	string		Case value

---

Timeouts

SetTimeout

import { SetTimeout } from 'react-render-actions';

<SetTimeout enabled timeout={4000}>
  <p>Hello World!</p>
</SetTimeout>

Available options

Param	Type	Default	Description
timeout	number		Timeout value (in milliseconds)
enabled	boolean		Start timeout
onTimeout	() => void		Callback on timeout
onEnabled	() => void		Callback on enabled
onDisabled	() => void		Callback on disabled
onDestroy	() => void		Callback on destroy

SetInterval

import { SetInterval } from 'react-render-actions';

<SetInterval initialCounter={0} interval={2000}>
  {(i) => <p>{i}</p>}
</SetInterval>

Available options

Param	Type	Default	Description
initialCounter	number		Initial counter value
paused	boolean		Pause timeout
interval	number		Interval value (in milliseconds)
onInterval	(counter: number) => void		Callback on interval
onStart	() => void		Callback on start
onPause	() => void		Callback on pause
onDestroy	() => void		Callback on pause

License

This project is licensed under the MIT License © 2020-present Jakub Biesiada