with-lifecycles

Everyone loves React's stateless functional components (SFC). The ease and simplicity of writing just a function for a React component is so delicious that you wish you could write your entire app with only functions!

Inevitably, you'll run across a need to use state in your component. Or even scarier, having to use some of the lifecycle methods of a React Class Component.

Then you're met with a horrible quandry: do you keep the beautiful simplicity of your SFC (🤗) or do you rewrite it to be a React Class Component (😢).

And everyone hates that most horrible of all chores of converting a SFC to a Class component.

...well fear not...

For this is the library for you! It'll let you have your 🎂 and 👄 it too!

Example

We have a simple Counter component that can increment a counter.

const Counter = ({ count, incrementCount }) => (
  <div>
    <div>Current count: {count}</div>
    <button onClick={incrementCount}>Increment</button>
  </div>
);

This is a nice and simple SFC. However, it doesn't do anything without any state. So let's add that.

const CounterWithLifecycles = withLifecycles({
  getInitialState: () => ({ count: 0 }),
  mapStateToProps: state => ({ count: state.count }),
  incrementCount: ({ props, state, setState }) =>
    setState({ count: state.count + 1 }),
})(Counter);

Voila! 🎉 Your SFC now has all the super powers of a React Class component.

Play with a live example on Codesandbox.

Documentation

withLifecycles is a Higher-Order Component which takes in an object which supports every known React Class method, including any additional methods you want to be included in the returned class (such as event handlers), and returns a function which takes in the component you want to wrap.

There's two additional special properties:

getInitialState(props): This is similar to the old React.createClass method and is a way for you to set the initial state of the wrapped component. It is called with props.

mapStateToProps(state, props): Similar to react-redux's mapStateToProps, it's called with state and props.

non-React method: Any non-React method is called with an object that looks like:

{
    event: event, // Event Handler Event if it exists.
    state: this.state, // State
    props: this.props, // Props
    setState: this.setState, // A copy of setState for updating.
}