Skip to content
This repository has been archived by the owner. It is now read-only.
⚛ A set of React higher-order components utilities. Drop-in replacement for recompose.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs chore: changelog Mar 16, 2018
examples chore: upgrade dependencies Aug 20, 2018
resources docs: add logo Jul 27, 2017
scripts
src chore: upgrade dependencies Aug 20, 2018
.babelrc feat: support React 16 Oct 4, 2017
.eslintignore chore: modernize build, tests... (#93) Dec 12, 2017
.eslintrc.json chore: upgrade dependencies Aug 20, 2018
.gitignore chore: modernize build, tests... (#93) Dec 12, 2017
.nvmrc feat: compatibility with react 15.5+ Apr 23, 2017
.prettierrc fix(connectObs): unsubscribe from observables when unmounting (#92) Dec 12, 2017
.travis.yml chore: modernize build, tests... (#93) Dec 12, 2017
CHANGELOG.md chore: changelog Mar 16, 2018
LICENSE
README.md docs(readme): deprecate the project Nov 25, 2018
package.json chore: upgrade dependencies Aug 20, 2018
setupTests.js feat: support React 16 Oct 4, 2017
yarn.lock chore: upgrade dependencies Aug 20, 2018

README.md

Recompact

Build Status codecov

Recompact is a set of React higher-order components for reactive programming. It's a drop-in replacement of Recompose with several enhancements.

State of recompact

React has introduced React hooks: 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:

yarn add recompact

and to use it in your code:

import recompact from 'recompact'

Optimizing bundle size

babel-plugin-lodash

The best way to reduce build size is to use babel-plugin-lodash. It can be used with other libraries than lodash, just like this:

.babelrc

{
  "plugins": [
    ["lodash", { "id": "recompact" }],
  ]
}

Transforms

import recompact from 'recompact'
import { pure, withProps } from 'recompact'

const enhance = recompact.compose(
  withProps({ className: 'beautiful' }),
  pure,
)

roughly to

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, it is not supported in recompact.

Documentation

Benchmarks

Recompact vs. Recompose

Recompact is a drop-in replacement* for Recompose with better performance.

* Except for the callback 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 and one using recompact.

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:

recompact-vs-recompose

New methods

Recompact also features higher-order components that are not included in Recompose:

And some very specific higher-order components that give you a lot of power:

To learn more about how to use connectObs and withObs inside your project, please refer to this complete guide about connectObs and withObs.

License

MIT

You can’t perform that action at this time.