React Class Helper

Helper for ES6 class with React (autobind, mixins, ...)

Installation

npm install react-class-helper

To see how to use ES6 class with React, please check this post

Usage

This library provides two elements: Component and Mixins. They can be used together or separately.

Component

Component extends React's Component built-in class to provide auto-binding.

React.createClass has a built-in magic feature that bound all methods to this automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.

Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.

So it means that currently you have to do this:

1import React from 'react';
2
3class MyButton extends React.Component {
4  constructor(props) {
5    super(props);
6
7    // Explicitly prebind methods in your constructor
8    this.onClick = this.onClick.bind(this);
9  }
10
11  onClick() {
12    // If not prebind, this === window (global object in browser)
13    this.setState({ clicked: true });
14  }
15
16  render() {
17    return (
18      <button onClick={this.onClick}>My button</button>
19    );
20  }
21}

With your component extending `Component` class, you can do this:

1// Note, I left React module because the JSX tags are transformed
2// to `React.createElement` so we still need to import this module
3import React from 'react';
4import { Component } from 'react-class-helper';
5
6// Extending `Component` instead of `React.Component`
7class MyButton extends Component {
8  constructor(props) {
9    super(props);
10    // Use `super(props, false);` to not autobind
11    // Or `this.bind(['onClick']);` to bind only some methods
12  }
13
14  onClick() {
15    // Automatically bind to class instance
16    this.setState({ clicked: true });
17  }
18
19  render() {
20    return (
21      <button onClick={this.onClick}>My button</button>
22    );
23  }
24}

Mixins

Mixins provides compatibility with React.createClass mixins. Original idea from react-mixin.

Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.

There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn't help that effort.

But if you still want to use mixins with ES6 class. See below how.

`Mixins(componentClass, mixins = [], options = {})`

• componentClass Component factory (not class instance).
• mixins Array of mixin objects.
• options
  • defaultRule Default rule to apply to property not defined in rules
  • rules Map mixin properties to rules

1// This is the default options
2{
3  rules: {
4    // Lifecycle methods
5    componentWillMount:        Mixins.MANY,
6    componentDidMount:         Mixins.MANY,
7    componentWillReceiveProps: Mixins.MANY,
8    shouldComponentUpdate:     Mixins.ONCE,
9    componentWillUpdate:       Mixins.MANY,
10    componentDidUpdate:        Mixins.MANY,
11    componentWillUnmount:      Mixins.MANY,
12
13    // Compatibility hack
14    getDefaultProps:           Mixins.MANY_MERGED,
15    getInitialState:           Mixins.MANY_MERGED
16  },
17  defaultRule:                 Mixins.ONCE
18}
19

Built-in rules - `Mixins.ONCE` Property can be defined only once in component or mixin - `Mixins.MUlTI` Property can be defined multiple times in component or mixin, execution order is from left to right in mixins array and then component. - `Mixins.MULTI_MERGED` Property can be defined multiple times in component or mixin, execution order is from left to right in mixins array and then component. Merge all results into one. Must returns objects or null.
Example:

1import React from 'react';
2import { Component, Mixins } from 'react-class-helper';
3
4// Define component
5class MyButton extends Component {
6  constructor(props) {
7    super(props);
8
9    // `Component` class set `this.state` from `_getInitialState()` automatically
10    // If you use the built-in `React.Component` you have to call it explicitly
11    //
12    // this.state = Object.assign({}, this._getInitialState());
13  }
14
15  // If you use the built-in `React.Component` you must declare
16  // this method explicitly
17  //
18  // _getInitialState() {
19  //   return {};
20  // }
21
22  onClick() {
23    this.setState({ clicked: true });
24  }
25
26  componentDidMount() {
27    console.log('called `componentDidMount` from MyButton');
28  }
29
30  render() {
31    return (
32      <button onClick={this.onClick}>My button</button>
33    );
34  }
35}
36
37// Define some mixins
38var myMixin1 = {
39  componentDidMount() {
40    console.log('called `componentDidMount` from Mixin1');
41  }
42};
43
44var myMixin2 = {
45  componentDidMount() {
46    console.log('called `componentDidMount` from Mixin2');
47  },
48
49  // Objects are ignored except 'statics' and 'propTypes'
50  someObject: {}, // Ignore
51
52  propTypes: { // Merge into `MyButton.propTypes`
53    myProp: React.PropTypes.string
54  },
55
56  statics: { // Merge into `MyButton`
57    queries: {}
58  },
59
60  getDefaultProps() { // Merge into `MyButton.defaultProps`
61    return { myProp: 'myProp' };
62  },
63
64  getInitialState() { // Rename to `_getInitialState` to avoid React's warning
65                      // Call in component constructor and merge result
66    return { myState: 'myState'};
67  },
68
69  shouldComponentUpdate() { // Throw error if defined in other mixin
70    return true;
71  }
72};
73
74// Set mixins to component
75Mixins(MyButton, [myMixins1, myMixin2]);

Support

If you have any problem or suggestion please open an issue here.

License MIT

The MIT License

Copyright 2015, Simon Degraeve

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.