Simpler Stateless Components
const constantProper = {
  age: 15,
};

const dynamicProper = props => {
  return {
    children: `The cat is ${props.age} years old`,
  };
};

const Cat = compose(constantProper, dynamicProper)('p');
// => <p>The cat is 15 years old</p>;
Used by
Features
compose

It allows you to encapsulate component logic into smaller, reusable functions, which in turn can be combined back into component.

The fundamental idea is that React components has a way of becoming bloated with, often repeated, logic. This lib provides you with a set of tools to avoid that.

import { compose, styles } from 'react-compose';

const constantStyle = {
  background: 'red',
};
const dynamicStyle = ({ isActive }) => (!isActive && {
  display: 'none',
});

const Component = compose(styles(constantStyle, dynamicStyle))('p');

return (props) => {
  return <Component isActive={false}>Some text</Component>
};
styles

Styling components is often a mess, using the same compose pattern for the style attribute, `styles` allows you to split the styling behavior into encapsulated pieces.

This method works nicely on top of several other methods for handling inline styling, and constant style attributes can “theoretically” be optimised and extracted into a separate CSS file during build time.

import { compose, styles } from 'react-compose';

const constantStyle = {
  background: 'red',
};
const dynamicStyle = ({ isActive }) => (!isActive && {
  display: 'none',
});

const Component = compose(styles(constantStyle, dynamicStyle))('p');

return (props) => {
  return <Component isActive={false}>Some text</Component>
};
classNames
classNames is another helper pattern for composing className behavior. Using the awesome classNames library.
import { compose, classNames } from 'react-compose';

const btnClassNames = classNames('btn',
  ({ pressed }) => pressed && 'btn-pressed',
  ({ hover }) => hover && 'btn-hover');

const Button = compose(btnClassNames)('button');

// pressed: true => <button className="btn btn-pressed" />
// pressed: false, hover: true => <button className="btn btn-hover" />
children

Having a list of elements inside a parent element is so common that we built a specific compose function to handle it for us.

The children function will join all its arguments into the children property of a component, as well as passing along all the props into the children elements.

import { compose, children } from 'react-compose';

const AgeInfo = props => {
  return <p>Age: {props.age} years</p>;
};

const HeightInfo = props => {
  return <p>Height: {props.height} cm</p>;
};

const Info = compose(children(AgeInfo, HeightInfo))('div');

const DogInfo = compose({ age: 5, height: 150 })(Info);

// => <div>
//      <p>Age: 5</p>
//      <p>Height: 150</p>
//    </div>
Simpler Tests

The encapsulated pieces will be easily testable, either because they are constant or since their functionality has a more narrow scope than a corresponding component would have.

It is more straight forward to test the encapsulated behavior rather than the component as a whole.

import { compose, styles } from 'react-compose';
const labelToChildren = ({ label }) => ({ children: label });

const ButtonComponent = compose(labelToChildren)('button');

describe('labelToChildren', () => {
  it('should pass whatever input label as children', () => {
    expect(labelToChildren({ label: 'string' }).children).toEqual('string');
  });
});
Installation
Step #1- Download with npm
npm install react-compose --save
Step #2- Require in Javascript
import { compose, styles, children } from 'react-compose';
Step #3- Use it
const Cat = compose(constantProper, dynamicProper)('p');
Dependencies
labelReact ^0.14.0
labelLodash 0.3+