https://github.com/Astrocoders/epitath
Compose render props imperatively with async/await/CPS kinda sugar
https://github.com/Astrocoders/epitath
cps react render-props
Last synced: 18 days ago
JSON representation
Compose render props imperatively with async/await/CPS kinda sugar
- Host: GitHub
- URL: https://github.com/Astrocoders/epitath
- Owner: Astrocoders
- License: mit
- Created: 2018-09-05T03:02:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-13T19:49:50.000Z (over 7 years ago)
- Last Synced: 2025-10-01T22:11:12.391Z (8 months ago)
- Topics: cps, react, render-props
- Language: JavaScript
- Homepage:
- Size: 376 KB
- Stars: 388
- Watchers: 13
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-projects - epitath - Compose render props imperatively with async/await/CPS kinda sugar ⭐387 `JavaScript` (📦 Legacy & Inactive Projects)
README
# epita✞h
[](#contributors)
In memoriam HOCs and Render Props
### [Read the article](https://medium.com/p/9f76dd911f9e)
### Also, we think you may want to take a look on [React Hooks API now](https://reactjs.org/docs/hooks-intro.html)
```js
import epitath from 'epitath'
...
const App = epitath(function*() {
const { loading, data } = yield
const { time } = yield
return (
{loading ? (
Loading
) : (
{`Hello, ${data.user.name}`}
The time is {time.toLocaleString()}!
)}
)
})
```
[![npm package][npm-badge]][npm]
Compose HOCs imperatively like async/await. No callback hell!
[Live demo](http://astrocoders.com/epitath)
[Source of demo](https://github.com/Astrocoders/epitath/blob/master/demo/src/index.js#L42)
[npm-badge]: https://img.shields.io/npm/v/npm-package.svg?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package
## Install
```
yarn add epitath
```
or
```
npm install --save epitath
```
## Why
Render props are amazing for providing more functionality but once you need to stack a bunch of them you get what recalls a painful callback hell.
```jsx
{({ data }) =>
{({ mutate, result })=>
etc
}
}
```
## How
Wait, we just mentioned "callback hell". So what if we had a function that would allow us to have a kind of sugar for continuation-passing-style à la async/await?
And that's exactly what epitath is, it just takes care of the callbacks for you.
The whole code is this:
```js
import React from 'react'
import immutagen from 'immutagen'
export default component => {
const generator = immutagen(component)
const compose = context => {
const value = context.value
return context.next
? React.cloneElement(value, null, values => compose(context.next(values)))
: value
}
function Epitath(props) {
return compose(generator(props))
}
Epitath.displayName = `EpitathContainer(${component.displayName || 'anonymous'})`
return Epitath
}
```
**Note that** epitath will only yield the first argument of the render function. In order to consume multiple arguments, we recommend creating a wrapper component:
```js
const MutationWrapper = ({ children, ...props }) =>
{(mutate, result) => children({ mutate, result })}
const { mutate, result } = yield
```
## How is this different from Suspense?
Suspense only allows you to evalulate a promise once. It does not allow you to trigger a re-render for a state update.
And with epitath you can even use Formik, Apollo optimistic, React Powerplug and Smalldots tooling and etc!
## BTW it's epitaph not "epitath"
"These Astrocoders dudes simply don't know how to spell words in English!"
Actually it was intended, for 2 reasons:
1. We wanted to put a cross as icon of the package
2. Epitaph is already taken in NPM
## Contributing
### Steps to get it running
Install the deps
```
yarn install
```
Boot the demo
```
yarn start
```
### Things missing that we would like a little help
- [ ] Tests
- [ ] TypeScript support
### Acknowledgements
Thanks @jamiebuilds for the [suggestions](https://github.com/Astrocoders/epitath/issues/1) on how simplifying the API
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Jamie](https://jamie.build/)
[🤔](#ideas-jamiebuilds "Ideas, Planning, & Feedback") [💻](https://github.com/Astrocoders/epitath/commits?author=jamiebuilds "Code") | [
Eli Perelman](http://eliperelman.com)
[🤔](#ideas-eliperelman "Ideas, Planning, & Feedback") [💻](https://github.com/Astrocoders/epitath/commits?author=eliperelman "Code") | [
Gabriel Rubens](https://medium.com/@_gabrielrubens)
[🤔](#ideas-grsabreu "Ideas, Planning, & Feedback") [💻](https://github.com/Astrocoders/epitath/commits?author=grsabreu "Code") | [
Medson Oliveira](https://github.com/medson10)
[🤔](#ideas-medson10 "Ideas, Planning, & Feedback") [💻](https://github.com/Astrocoders/epitath/commits?author=medson10 "Code") | [
George Lima](https://github.com/georgelima)
[🤔](#ideas-georgelima "Ideas, Planning, & Feedback") [💻](https://github.com/Astrocoders/epitath/commits?author=georgelima "Code") | [
Eliabe Júnior](http://eliabejr.com)
[💻](https://github.com/Astrocoders/epitath/commits?author=eliabejr "Code") [🎨](#design-eliabejr "Design") | [
Guilherme Decampo](https://astrocoders.com)
[🤔](#ideas-guilhermedecampo "Ideas, Planning, & Feedback") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [
gtkatakura](https://github.com/gtkatakura)
[🤔](#ideas-gtkatakura "Ideas, Planning, & Feedback") [💬](#question-gtkatakura "Answering Questions") [💡](#example-gtkatakura "Examples") | [
Erjan Kalybek](https://mssg.me/emx)
[📖](https://github.com/Astrocoders/epitath/commits?author=erjanmx "Documentation") | [
Jack Hanford](http://jackhanford.com/)
[📖](https://github.com/Astrocoders/epitath/commits?author=hanford "Documentation") | [
Haz](https://twitter.com/diegohaz)
[📖](https://github.com/Astrocoders/epitath/commits?author=diegohaz "Documentation") |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!