https://github.com/tobua/epic-react
Not epic but handy helpers for conditional React rendering
https://github.com/tobua/epic-react
conditional react react-hooks
Last synced: 6 months ago
JSON representation
Not epic but handy helpers for conditional React rendering
- Host: GitHub
- URL: https://github.com/tobua/epic-react
- Owner: tobua
- Created: 2019-07-12T20:13:32.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2022-03-30T16:57:51.000Z (almost 4 years ago)
- Last Synced: 2025-06-12T06:49:04.027Z (7 months ago)
- Topics: conditional, react, react-hooks
- Language: TypeScript
- Homepage: https://tobua.github.io/epic-react
- Size: 838 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# epic-react
Not epic but handy helpers for conditional React rendering. Functional utilities to quickly implement recurring rendering patters in a readable way.
> Jump directly to the [epic](#epic).
## Usage
`npm install react epic-react`
```tsx
import React from 'react'
import { when } from 'epic-react'
export const DaytimeTheme = (time: number) =>
when(
time > 6 && time < 18,
() => ,
() =>
)
```
## Available Methods
```tsx
import { not, when, epic, until, list, random } from 'epic-react'
```
### not
If the provided condition is true nothing will be rendered.
```tsx
export const CartButton = (stock: number) =>
not(stock === 0, Buy)
```
### when
If the condition is true render the component and if it's false render the fallback if one is provided.
```tsx
export const DaytimeTheme = (time: number) =>
when(
time > 6 && time < 18,
() => ,
() => // Optional
)
```
Usually there is more than an if else required for rendering. In this case an epic will help:
```tsx
// Usage as an object: specifying conditions along with components.
epic
.loading(() =>
Loading...
, false)
.error(() => Error...
, false)
.fallback(() => Fallback...
, false)
.done(() => Epic done
)
// Usage as a function: specifying conditions first.
epic({
loading: false,
error: false,
fallback: false,
})
.loading(() =>
Loading...
)
.error(() => Error...
)
.fallback(() => Fallback...
)
.done(() => Epic done
)
```
The second option is especially handy if you already have an object with the conditions available or can create a matching state.
### until
Asynchronous rendering depending on the state of a Promise.
```tsx
until(
new Promise((done) => setTimeout(() => done('resolved!'), 3000)),
(result) =>
{result}
,
loading...
)
```
If the Promise is rejected an optional error handler will be rendered.
```tsx
until(
new Promise((done, fail) =>
setTimeout(() => fail('rejected...'), 3000)
),
result => (
{result}
),
loading...
,
error => (
{error}
)
)}
```
### list
```tsx
const ListElement = ({ value }: { value: number }) => {value}
```
This epic makes rendering lists quicker.
```tsx
list<{ value: number }>([{ value: 1 }, { value: 2 }, { value: 3 }], ListElement)
```
As the third parameter you can pass an element which will be rendered in case list is empty.
```tsx
list<{ value: number }>([], ListElement, It's an empty list ;))
```
An optional separator element can be inserted in between elements, similar to the join() function for regular Arrays.
```tsx
list<{ value: number }>(
[{ value: 1 }, { value: 2 }, { value: 3 }],
ListElement,
List is empty...
,
);
```
### random
Randomly picks a component from the list of arguments.
```tsx
random(
() =>
first
,
() => second
)
```
## Comparison with other Abstractions
### Vanilla JS
Simply writing all the logic yourself works just fine. These epics however have been created due to very similar parts occurring over and over again.
```tsx
// Vanilla JS
export const AsyncFetchedData = (data) => {
if (data.loading) {
return
}
if (data.error) {
return
}
return
}
```
```tsx
// with an epic
export const AsyncFetchedData = (data) => epic
.loading(() => , data.loading)
.error(() => , data.error)
.done(() => );
```
### Higher Order Components
```tsx
import { Suspense } from 'react'
const LazyComponent = React.lazy(() => import('./ProfilePage'))
return (
Loading...}>
)
```
```tsx
import { until } from 'epic-react'
return until(import('./lazy'), (result) => ,
Loading...
)
```
Suspense (HOC): 4 Lines of Code
until (react-epic): 1 Line of Code 🤓
## Event Handlers
Shortcuts to do something when a certain key is pressed. To be used with `onKeyDown`, `onKeyPress` or `onKeyUp`.
```tsx
import { onEnter, onEscape } from 'epic-react'
```
### onEnter
```tsx
submit())} />
```
### onEscape
```tsx
close())} />
```
### Several Keys
```tsx
{
onEnter(() => submit())(event)
onEscape((event) => close(event))(event)
}}
/>
```
