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')}/>);
}