React Mixin Example

MixinExample.js

// Simple mixin that listens to mouse events and
// sets the state everytime the mouse position changes
var MousePosMixin = {
    getInitialState() {
        return { mouseX: 0, mouseY: 0 }
    },
    onMouseMove(e) {
        this.setState({ mouseX: e.clientX, mouseY: e.clientY });
    },
    componentDidMount() {
        window.addEventListener("mousemove", this.onMouseMove);
    },

    componentWillUnmount() {
        window.removeEventListener("mousemove", this.onMouseMove);
    }
};

// This component will now have mouseX and mouseY in the state
var MyComponent = React.createClass({
    mixins: [MousePosMixin],
    render() {
        return (<span>Mouse X: {this.state.mouseX} Mouse Y: {this.state.mouseY}</span>);
        
    }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('container')
);