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

About

πŸ’₯ Set of JavaScript actions to use during component rendering

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •