A collection of @decorators for React Components
Attention - In order to use react-decoration you have to use babel 5 or use this plugin for babel 6. Check this page for information.
You can install react-decoration using npm:
npm install --save react-decorationIf you aren't using npm in your project, you can include reactDecoration using UMD build in the dist folder with <script> tag.
Once you have installed react-decoration, supposing a CommonJS environment, you can import decorators in this way and immediately use them with no configuration.
import React from 'react';
import {
withStyles,
autobind,
killEvent,
extractValue,
} from 'react-decoration';
@withStyles({
container: {
width: '100%',
height: 'auto',
},
input: {
width: 250,
},
})
class InputField extends React.Component {
state = {
value: 'Hello!'
}
@autobind
checkValue() {
return !isNaN(new Date(this.state.value));
}
@killEvent
@extractValue
handleChange(value) {
this.setState({
value,
});
}
render() {
const { styles } = this.props;
return (
<div style={styles.container}>
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
style={styles.input}
/>
{
!this.checkValue() && (
<p>Formatting error</p>
)
}
</div>
);
}
}Visit docs folder to find the complete list of decorators and their usage.
This project adheres to Semantic Versioning.
Every release, along with the migration instructions, is documented on the Github Releases page.
Matteo Basso
Copyright (c) 2016, Matteo Basso.
react-decoration source code is licensed under the MIT License.