Skip to content

JB1905/react-render-actions

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

NPM version NPM downloads NPM license Codecov Travis Bundle size

About

Set of JavaScript actions to use during component rendering

Demo

Playground – play with library in Storybook

Similar Projects

Contents

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: 'john@example.com',
};

<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