react.mixer

External mixins (traits) for react components.

Installation

npm install --save react.mixer

Usage

New component

import Component from 'react.mixer';
 
class MyAwesomeComponent extends Component {
    // plain old react-component implementation
}
 
export default MyAwesomeComponent;

And then:

// Usage place
import { props } from 'react.mixer';
 
const DefaultedMyAwesomeComponent = MyAwesomeComponent.mix(props({ myProp: 42 }));

Existing component

import { Input as BInput } from 'react-bootstrap';
import { mixable, generatedProps } from 'react.mixer';
 
let id = 0;
const Input = mixable(BInput).mix(generatedProps({ id() { return id++; } }));

Creating custom mixin

// in place
 
import { custom } from 'react.mixer';
 
function onStart() { /* code */ }
const MyAwesomeMixableComponentWithOnStart = MyAwesomeMixableComponent.mix(custom((Component, original) => {
    // IMPORTANT: Parameter with "Component" MUST be named in TitleCase, otherwise jsx would ignore it!!!
    onStart();
    return (
        <Component {...original.props}>
            {original.children}
        </Component>
    );
}));
 
 
// as class
 
import Mixin from 'react.mixer/lib/mixins/Mixin';
 
class MyAwesomeGreeterMixin extends Mixin {
    constructor() {
        super((component, instance) => this.mixHello(component, instance));
    }
 
    mixHello(Component, instance) {
    // IMPORTANT: Parameter with "Component" MUST be named in TitleCase, otherwise jsx would ignore it!!!
        return (
            <Component {...instance.props}>
                {instance.children}
                <p>Hello!</p>
            </Component>
        );
    }
}
 
// and then just mix it in
 
const MyAwesomeMixableComponentWithHello = MyAwesomeMixableComponent.mix(new MyAwesomeGreeterMixin());

License

This library is licensed under MIT license.