Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jb1905/react-render-actions
💥 Set of JavaScript actions to use during component rendering
https://github.com/jb1905/react-render-actions
async-await filter if-else loop map promise react reduce rendering switch-case
Last synced: about 13 hours ago
JSON representation
💥 Set of JavaScript actions to use during component rendering
- Host: GitHub
- URL: https://github.com/jb1905/react-render-actions
- Owner: JB1905
- License: mit
- Created: 2019-11-10T15:43:10.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T14:27:55.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T19:48:36.304Z (8 months ago)
- Topics: async-await, filter, if-else, loop, map, promise, react, reduce, rendering, switch-case
- Language: TypeScript
- Homepage: https://jb1905.github.io/react-render-actions/
- Size: 4.43 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# [react-render-actions](https://github.com/JB1905/react-render-actions) (WIP)
[](https://www.npmjs.com/package/react-render-actions)
[](https://www.npmjs.com/package/react-render-actions)
[](https://www.npmjs.com/package/react-render-actions)
[](https://codecov.io/gh/JB1905/react-render-actions)
[](https://app.travis-ci.com/github/JB1905/react-render-actions)
[](https://bundlephobia.com/result?p=react-render-actions)
## About
Set of JavaScript actions to use during component rendering
### Demo
[**Playground – play with library in Storybook**](https://jb1905.github.io/react-render-actions/)
### Similar Projects
- [React For](https://github.com/MJez29/react-for/) by [Michal Jez](https://github.com/MJez29/)
- [React If](https://github.com/romac/react-if/) by [Romain Ruetschi](https://github.com/romac/)
- [React Switch Case](https://github.com/AlexSergey/react-switch-case/) by [Sergey](https://github.com/AlexSergey/)
## Contents
- [How to Install](#how-to-install)
- [Components](#components)
- [Conditions](#conditions)
- [If-Else](#if-else)
- [When](#when)
- [Unless](#unless)
- [Functions](#functions)
- [Map](#map)
- [Filter](#filter)
- [Reduce](#reduce)
- [Loops](#loops)
- [For](#for)
- [ForOf](#forof)
- [ForIn](#forin)
- [ForEach](#foreach)
- [While](#while)
- [DoWhile](#dowhile)
- [Promises](#promises)
- [Switch](#switch)
- [Timeouts](#timeouts)
- [SetTimeout](#settimeout)
- [SetInterval](#setinterval)
## How to Install
First, install the library in your project by npm:
```sh
$ npm install react-render-actions
```
Or Yarn:
```sh
$ yarn add react-render-actions
```
## Components
### Conditions
#### If-Else
```js
import { If, Then, Else } from 'react-render-actions';
2 is smaller than 3
2 isn't smaller than 3
```
##### Available options
**_If_**
| Param | Type | Default | Description |
| --------- | ------------- | ------- | ------------------- |
| condition | () => boolean | ` ` | condition to be met |
#### When
```js
import { When } from 'react-render-actions';
2 is smaller than 3
```
##### Available options
| Param | Type | Default | Description |
| --------- | ------------- | ------- | ------------------- |
| condition | () => boolean | ` ` | condition to be met |
#### Unless
```js
import { Unless } from 'react-render-actions';
3}>
2 isn't greater than 3
```
##### Available options
| Param | Type | Default | Description |
| --------- | ------------- | ------- | ------------------- |
| condition | () => boolean | ` ` | condition to be met |
---
### Functions
#### Map
```js
import { Map } from 'react-render-actions';
{(item, index) =>
{item}
}
```
##### Available options
| Param | Type | Default | Description |
| ------ | ----- | ------- | ----------- |
| `data` | array | ` ` | Data to map |
#### Filter
```js
import { Filter } from 'react-render-actions';
item !== 2}>
{(filteredData) =>
{JSON.stringify(filteredData)}
}
```
##### Available options
| Param | Type | Default | Description |
| --------- | ------- | ------- | -------------- |
| `data` | array | ` ` | Data to filter |
| `pattern` | boolean | ` ` | Filter pattern |
#### Reduce
```js
import { Reduce } from 'react-render-actions';
prev + next}>
{(reducedValue) =>
{reducedValue}
}
```
##### Available options
| Param | Type | Default | Description |
| --------- | ------- | ------- | -------------- |
| `data` | array | ` ` | Data to reduce |
| `pattern` | boolean | ` ` | Reduce pattern |
---
### Loops
#### For
```js
import { For } from 'react-render-actions';
i < 10} next={(i) => i++}>
{(i) =>
Hello World!
}
```
#### ForOf
```js
import { ForOf } from 'react-render-actions';
{(i) =>
{i}
}
```
#### ForIn
```js
import { ForIn } from 'react-render-actions';
const data = {
name: 'John',
age: '21',
email: '[email protected]',
};
{([key, value]) =>
{key}: {value}
}
```
#### ForEach
```js
import { ForEach } from 'react-render-actions';
{(item) =>
{item}
}
```
#### While
```js
import { While } from 'react-render-actions';
1}>
Hello World!
```
#### DoWhile
```js
import { DoWhile } from 'react-render-actions';
1}>
Hello World!
```
---
### Promises
```js
import { RPromise, Resolve, Reject } from 'react-render-actions';
const promise = {}
Resolved!
Rejected!
```
---
### Switch
```js
import { Switch, Case, Default } from 'react-render-actions';
Apple
Banana
Pear
Raspberry
Fruit not found
```
##### Available options
**_Switch_**
| Param | Type | Default | Description |
| ------------- | ------ | ------- | ------------ |
| `switchValue` | string | ` ` | Switch value |
**_Case_**
| Param | Type | Default | Description |
| ------ | ------ | ------- | ----------- |
| `case` | string | ` ` | Case value |
---
### Timeouts
#### SetTimeout
```js
import { SetTimeout } from 'react-render-actions';
Hello World!
```
##### 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
```js
import { SetInterval } from 'react-render-actions';
{(i) =>
{i}
}
```
##### 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