Observable utilities

The main feature in this release is the addition of a suite of observable utilities, including mapPropsStream and componentFromStream. These are ported over from rx-recompose, which is now deprecated. Unlike rx-recompose, these utilities are compatible with any observable or stream-like library.

#196

Other changes

• createElement is now called createEagerElement. Also added createEagerFactory.
• flattenProp no longer omits the original prop from the resulting props.

Return of lifecycle()

lifecycle() has returned. It now has essentially the same API as React.createClass(), except you don't specify a render method, and it returns a higher-order component rather than a component. See API docs here: https://github.com/acdlite/recompose/blob/master/docs/API.md#lifecycle

Loose mode has also been enabled when compiling the library for npm. This fixes some issues with older versions of IE.

rx-recompose: Bugfix for multiple observers

Fixes a bug in createComponent (and therefore mapPropsStream, too) where only the most recent observer receives prop updates. Thanks @gregmuellegger for diagnosing the issue. #158

v0.18.0

mapPropsOnChange -> withPropsOnChange

This helper was renamed to better describe how it works.

Prune API

Some helpers were removed. These may be added back, in some form, in a future version. Until then, you can use the lifecycle methods of a React class.

• doOnReceiveProps
• lifecycle

UMD bundle

A UMD bundle is now built via Webpack on each npm release. It can be accessed via npmcdn: https://npmcdn.com/[email protected]/build/Recompose.min.js

There's also a base JSFiddle that's handy for playing with the different helpers: https://jsfiddle.net/acdlite/69z2wepo/41596/

rx-recompose: Improved API

• New module: createComponent maps a stream of owner props to a stream of React nodes.
• observeProps is now called mapPropsStream
• observeProps used to allow you to return an object of streams, which it would convert into a stream of objects. This form caused too much confusion, in my experience, so it's been removed in favor of explicit calls to combineLatest.
• createEventHandler now returns an object with stream and handler, where the handler pushes new values onto the stream. Previously, it returns a function that was both a handler and a stream. This new form is akin to mailboxes in Elm.

Refer to the README for full info.

Remove currying and add withHandlers helper

Remove currying

Currying wasn't really buying us much, and it was adding an extra layer of confusion for people new to the library. Helpers are now functions that return higher-order components

const EnhancedComponent = helper(a, b, c)(BaseComponent)

which means they retain their composability.

The following form will no longer work:

// No longer works!
const EnhancedComponent = helper(a, b, c, BaseComponent)

To aid in the transition, helpers will print a warning to the console if you call them with too many arguments.

withHandlers

withHandlers(
  handlerCreators: {
    [handlerName: string]: (props: Object) => Function
  }
): HigherOrderComponent

Takes an object map of handler creators. These are higher-order functions that accept a set of props and return a function handler:

This allows the handler to access the current props via closure, without needing to change its signature.

Handlers are passed to the base component as immutable props, whose identities are preserved across renders. This avoids a common pitfall where functional components create handlers inside the body of the function, which results in a new handler on every render and breaks downstream shouldComponentUpdate() optimizations that rely on prop equality.

Usage example:

const enhanceForm = compose(
  withState('value', 'updateValue', ''),
  withHandlers({
    onChange: props => event => {
      props.updateValue(event.target.value)
    },
    onSubmit: props => event => {
      event.preventDefault()
      submitForm(props.value)
    }
  })
)

const Form = enhanceForm(
  ({ value, onChange, onSubmit }) =>
    <form onSubmit={onSubmit}>
      <label>Value
        <input type="text" value={value} onChange={onChange} />
      </label>
    </form>
)

This replaces withAttachedProps, which has been removed.

React 15 compatibility

Yay! Thanks @billyjanitsch for the speedy PR.

Upgrade to lodash 4

Upgrades Recompose's lodash dependency to v4.

Thanks @chrisui for the PR!

v0.13.0

withAttachedProps()

(actually added in 0.12, forgot to update release notes)

withAttachedProps(
  createChildProps: (getProps: () => Object) => Object,
  BaseComponent: ReactElementType
): ReactElementType

Note: The name of this helper will likely change to avoid confusion.

The first parameter createChildProps() is a function which accepts a function getProps(), which returns the current owner props. The props returned by createChildProps() are immutable and do not change throughout the lifecycle of the component.

Bugfix

Fixed bug with renderComponent() #84

v0.11.0

nest()

nest(...Components: Array<ReactElementType>): ReactElementType

Composes components by nesting each one inside the previous. For example:

// Given components A, B, and C
const ABC = nest(A, B, C)
<ABC pass="through">Child</ABC>

// Effectively the same as
<A pass="through">
  <B pass="through">
    <C pass="through">
      Child
    </C>
  </B>
</A>