Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gregberge/recompact
⚛ A set of React higher-order components utilities. Drop-in replacement for recompose.
https://github.com/gregberge/recompact
higher-order-component hoc react recompose
Last synced: 19 days ago
JSON representation
⚛ A set of React higher-order components utilities. Drop-in replacement for recompose.
- Host: GitHub
- URL: https://github.com/gregberge/recompact
- Owner: gregberge
- License: mit
- Archived: true
- Created: 2016-11-11T15:34:24.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-25T17:02:26.000Z (almost 6 years ago)
- Last Synced: 2024-05-12T09:42:24.538Z (6 months ago)
- Topics: higher-order-component, hoc, react, recompose
- Language: JavaScript
- Homepage: https://neoziro.github.io/recompact/
- Size: 922 KB
- Stars: 417
- Watchers: 11
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/neoziro/recompact)
[](https://codecov.io/gh/neoziro/recompact)
Recompact is a set of React higher-order components for reactive programming. It's a drop-in replacement of [Recompose](https://github.com/acdlite/recompose) with several enhancements.
## State of recompact
React has introduced [React hooks](https://reactjs.org/docs/hooks-intro.html): a new way to manage state and lifecycle in React. It solves most of use case that recompact was trying to solve. That's why **recompact is now deprecated and not actively maintained**. The project will remain published on npm but it does not accept new issues and it won't evolve any more. If you use it, you are encouraged to migrate to hooks, if you don't use it yet, then do not install it. If you really like it, feel free to fork it!
## Installation and Usage
To install the stable version:
```sh
yarn add recompact
```
and to use it in your code:
```js
import recompact from 'recompact'
```
## Optimizing bundle size
### [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash)
The best way to reduce build size is to use [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash). It can be used with other libraries than lodash, just like this:
**.babelrc**
```json
{
"plugins": [
["lodash", { "id": "recompact" }],
]
}
```
Transforms
```js
import recompact from 'recompact'
import { pure, withProps } from 'recompact'
const enhance = recompact.compose(
withProps({ className: 'beautiful' }),
pure,
)
```
roughly to
```js
import _compose from 'recompact/compose'
import _pure from 'recompact/pure'
import _withProps from 'recompact/withProps'
const enhance = _compose(
_withProps({ className: 'beautiful' }),
_pure,
)
```
### Tree shaking
Since [tree shaking isn't ready yet to reduce build size efficiently](https://advancedweb.hu/2017/02/07/treeshaking/), it is not supported in recompact.
## [Documentation](https://neoziro.github.io/recompact/)
## [Benchmarks](https://github.com/neoziro/recompact/tree/master/src/__benchmarks__)
## Recompact vs. Recompose
Recompact is a drop-in replacement* for [Recompose](https://github.com/acdlite/recompose) with better performance.
\* Except for the [callback](https://github.com/neoziro/recompact/issues/59) of `withState`'s state updater.
### Flattened React components tree
You may have noticed the
"compact" keyword in "Recompact". It's the main differences between Recompose and Recompact.
Recompact compacts all higher-order components into a single one. It results in a flatter React
tree. A flatter React tree has several advantages: performance improvement, better debugging (especially in React Developer Tools)
and easier testing.
Let's take two components using composition, [one using recompose](https://github.com/neoziro/recompact/blob/master/examples/RecomposeCounter.js) and [one using recompact](https://github.com/neoziro/recompact/blob/master/examples/RecompactCounter.js).
The two components are similar, but if you take a look at the React component tree (using React Developer Tool), you can see that the component using recompact is flat:
### New methods
Recompact also features higher-order components that are not included in Recompose:
- [omitProps](https://github.com/neoziro/recompact/tree/master/docs#omitpropspaths)
- [pickProps](https://github.com/neoziro/recompact/tree/master/docs#pickpropspaths)
And some very specific higher-order components that give you a lot of power:
- [connectObs](https://github.com/neoziro/recompact/tree/master/docs#connectobsobsmapper)
- [withObs](https://github.com/neoziro/recompact/tree/master/docs#withobsobsmapper)
To learn more about how to use `connectObs` and `withObs` inside your project, please refer to [this complete guide about `connectObs` and `withObs`](https://github.com/neoziro/recompact/blob/master/docs/Observables.md).
## License
MIT