npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eh-react-recompose

v0.33.1-dev.2

Published

A React utility belt for function components and higher-order components

Downloads

2

Readme

react-recompose

LICENSE npm:react-recompose

an updated fork of Recompose

Recompose is a React utility belt for function components and higher-order components. Think of it like lodash for React.

Full API documentation - Learn about each helper

Try Recompose

in an outdated version:

Recompose Base Fiddle - Easy way to dive in

Talk on YouTube

📺 Watch Andrew's talk on Recompose at React Europe. (Note: Performance optimizations he speaks about have been removed, more info here)

Installation

It is highly recommended to use Yarn to install this fork as an alias, for example:

yarn add recompose@npm:eh-react-recompose

then for TypeScript users:

yarn add --dev @types/recompose

or try out suguru03/recomposer.

with Preact 10

need to alias like this:

yarn add react@npm:@preact/compat react-dom@npm:@preact/compat

Some tests are skipped for Preact, see react-recompose#41

Related modules

no longer supported:

recompose-relay — Recompose helpers for Relay

You can use Recompose to...

...lift state into functional wrappers

Helpers like withState() and withReducer() provide a nicer way to express state updates:

const enhance = withState('counter', 'setCounter', 0)
const Counter = enhance(({ counter, setCounter }) =>
  <div>
    Count: {counter}
    <button onClick={() => setCounter(n => n + 1)}>Increment</button>
    <button onClick={() => setCounter(n => n - 1)}>Decrement</button>
  </div>
)

Or with a Redux-style reducer:

const counterReducer = (count, action) => {
  switch (action.type) {
  case INCREMENT:
    return count + 1
  case DECREMENT:
    return count - 1
  default:
    return count
  }
}

const enhance = withReducer('counter', 'dispatch', counterReducer, 0)
const Counter = enhance(({ counter, dispatch }) =>
  <div>
    Count: {counter}
    <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
    <button onClick={() => dispatch({ type: DECREMENT })}>Decrement</button>
  </div>
)

...perform the most common React patterns

Helpers like componentFromProp() and withContext() encapsulate common React patterns into a simple functional interface:

const enhance = defaultProps({ component: 'button' })
const Button = enhance(componentFromProp('component'))

<Button /> // renders <button>
<Button component={Link} /> // renders <Link />
const provide = store => withContext(
  { store: PropTypes.object },
  () => ({ store })
)

// Apply to base component
// Descendants of App have access to context.store
const AppWithContext = provide(store)(App)

...optimize rendering performance

No need to write a new class just to implement shouldComponentUpdate(). Recompose helpers like pure() and onlyUpdateForKeys() do this for you:

// A component that is expensive to render
const ExpensiveComponent = ({ propA, propB }) => {...}

// Optimized version of same component, using shallow comparison of props
// Same effect as extending React.PureComponent
const OptimizedComponent = pure(ExpensiveComponent)

// Even more optimized: only updates if specific prop keys have changed
const HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent)

...interoperate with other libraries

Recompose helpers integrate really nicely with external libraries like Relay, Redux, and RxJS

const enhance = compose(
  // This is a Recompose-friendly version of Relay.createContainer(), provided by recompose-relay
  createContainer({
    fragments: {
      post: () => Relay.QL`
        fragment on Post {
          title,
          content
        }
      `
    }
  }),
  flattenProp('post')
)

const Post = enhance(({ title, content }) =>
  <article>
    <h1>{title}</h1>
    <div>{content}</div>
  </article>
)

...build your own libraries

Many React libraries end up implementing the same utilities over and over again, like shallowEqual() and getDisplayName(). Recompose provides these utilities for you.

// Any Recompose module can be imported individually
import getDisplayName from 'recompose/getDisplayName'
ConnectedComponent.displayName = `connect(${getDisplayName(BaseComponent)})`

// Or, even better:
import wrapDisplayName from 'recompose/wrapDisplayName'
ConnectedComponent.displayName = wrapDisplayName(BaseComponent, 'connect')

import toClass from 'recompose/toClass'
// Converts a function component to a class component, e.g. so it can be given
// a ref. Returns class components as is.
const ClassComponent = toClass(FunctionComponent)

...and more

API docs

Read them here

Flow support

Read the docs

Translation

Traditional Chinese

Why

Forget ES6 classes vs. createClass().

An idiomatic React application consists mostly of function components.

const Greeting = props =>
  <p>
    Hello, {props.name}!
  </p>

Function components have several key advantages:

  • They help prevent abuse of the setState() API, favoring props instead.
  • They encourage the "smart" vs. "dumb" component pattern.
  • They encourage code that is more reusable and modular.
  • They discourage giant, complicated components that do too many things.
  • They allow React to make performance optimizations by avoiding unnecessary checks and memory allocations.

(Note that although Recompose encourages the use of function components whenever possible, it works with normal React components as well.)

Higher-order components made easy

Most of the time when we talk about composition in React, we're talking about composition of components. For example, a <Blog> component may be composed of many <Post> components, which are composed of many <Comment> components.

Recompose focuses on another unit of composition: higher-order components (HOCs). HOCs are functions that accept a base component and return a new component with additional functionality. They can be used to abstract common tasks into reusable pieces.

Recompose provides a toolkit of helper functions for creating higher-order components.

Should I use this?

Performance and other concerns

Use a Render Prop Michael Jackson article about what's wrong with HOCs.

see also:

Usage

All functions are available on the top-level export.

import { compose, mapProps, withState /* ... */ } from 'recompose'

Note: react is a peer dependency of Recompose. If you're using preact, add this to your webpack.config.js:

resolve: {
  alias: {
    react: "preact"
  }
}

Composition

Recompose helpers are designed to be composable:

const BaseComponent = props => {...}

// This will work, but it's tedious
let EnhancedComponent = pure(BaseComponent)
EnhancedComponent = mapProps(/*...args*/)(EnhancedComponent)
EnhancedComponent = withState(/*...args*/)(EnhancedComponent)

// Do this instead
// Note that the order has reversed — props flow from top to bottom
const enhance = compose(
  withState(/*...args*/),
  mapProps(/*...args*/),
  pure
)
const EnhancedComponent = enhance(BaseComponent)

Technically, this also means you can use them as decorators (if that's your thing):

@withState(/*...args*/)
@mapProps(/*...args*/)
@pure
class Component extends React.Component {...}

Optimizing bundle size

Since 0.23.1 version recompose got support of ES2015 modules. To reduce size all you need is to use bundler with tree shaking support like webpack 2 or Rollup.

Using babel-plugin-lodash

babel-plugin-lodash is not only limited to lodash. It can be used with recompose as well.

This can be done by updating lodash config in .babelrc.

 {
-  "plugins": ["lodash"]
+  "plugins": [
+    ["lodash", { "id": ["lodash", "recompose"] }]
+  ]
 }

After that, you can do imports like below without actually including the entire library content.

import { compose, mapProps, withState } from 'recompose'

Debugging

It might be hard to trace how does props change between HOCs. A useful tip is you can create a debug HOC to print out the props it gets without modifying the base component. For example:

make

const debug = withProps(console.log)

then use it between HOCs

const enhance = compose(
  withState(/*...args*/),
  debug, // print out the props here
  mapProps(/*...args*/),
  pure
)

Community

NOTE: Not all of this information applies to this fork. Please feel free to raise an issue in case of any questions or feedback.

Who uses Recompose

If your company or project uses Recompose, feel free to add it to the official list of users by editing the wiki page.

Recipes for Inspiration

We have a community-driven Recipes page. It's a place to share and see recompose patterns for inspiration. Please add to it! Recipes.

Feedback wanted

Project is still in the early stages. Please file an issue or submit a PR if you have suggestions! Or ping me (Andrew Clark) on Twitter.

Getting Help

For support or usage questions like “how do I do X with Recompose” and “my code doesn't work”, please search and ask on StackOverflow with a Recompose tag first.

We ask you to do this because StackOverflow has a much better job at keeping popular questions visible. Unfortunately good answers get lost and outdated on GitHub.

Some questions take a long time to get an answer. If your question gets closed or you don't get a reply on StackOverflow for longer than a few days, we encourage you to post an issue linking to your question. We will close your issue but this will give people watching the repo an opportunity to see your question and reply to it on StackOverflow if they know the answer.

Please be considerate when doing this as this is not the primary purpose of the issue tracker.

Help Us Help You

On both websites, it is a good idea to structure your code and question in a way that is easy to read to entice people to answer it. For example, we encourage you to use syntax highlighting, indentation, and split text in paragraphs.

Please keep in mind that people spend their free time trying to help you. You can make it easier for them if you provide versions of the relevant libraries and a runnable small project reproducing your issue. You can put your code on JSBin or, for bigger projects, on GitHub. Make sure all the necessary dependencies are declared in package.json so anyone can run npm install && npm start and reproduce your issue.