react-base-component v1.0.2

react-base-component

Base React component extended by some helpful features

Usage

import React from 'react';
import baseComponent from 'react-base-component';

// with decorators
export default @baseComponent class MyComponent extends React.Component {
	//... your component code
}

// or without decorators
export default class MyComponent extends React.Component {
	//... your component code
}
baseComponent(MyComponent);

Available features

._refCallback(refKey)

String refs are deprecated. So you need to provide function bound to your component. Or just ...

render() {
	return (<button ref={this._refCallback('mySuperButton')}></button>);
}

._bind(handlerName1, handlerName2, ...)

Helps you to bind your handlers more comfortably

export default class MyComponent extends React.Component {
	constructor(props) {
		// ... your code

		this._bind(
			'handleClick',
			// ... list your other handlers here
		);
	}

	handleClick() {
		// ... your click handler
	}

	render() {
		return (<button onClick={this.handleClick}></button>);
	}
}
baseComponent(MyComponent);

._bindToState(stateKey, valueResolver)

Often you have some form inputs. And every time their values changed you have to go and set it to state of your component. Stop it!

._bindToState creates a handler which takes result of valueResolver function and writes it to this.state.<stateKey>.

By default valueResolver equals

e => e.target.value

So if it is your case just omit the second argument.

And a couple of examples:

render() {
	return (<MySuperEmailControl onChange={this._bindToState('email', val => val)}/>);
}

render() {
	return (<input type="text" placeholder="Please enter your email" onChange={this._bindToState('email')}/>);
}