react-decoration
v2.1.0
Published
A collection of @decorators for React Components
Downloads
284
Maintainers
Readme
react-decoration
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.
Installation
You can install react-decoration using npm:
npm install --save react-decoration
If you aren't using npm in your project, you can include
reactDecoration using UMD build in the dist folder with <script>
tag.
Usage
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 { getItems } from './utils';
import { AutoComplete } from './components';
import {
withStyles,
debounce,
killEvent,
handleRenderError,
} from 'react-decoration';
@withStyles({
container: {
width: '100%',
height: 'auto',
},
input: {
width: 250,
},
})
@handleRenderError((ex) => <div className="danger">{ex.message}<div>)
class SampleForm extends React.Component {
state = {
value: 'Hello!',
items: [],
}
@debounce(500)
handleChange(e) {
getItems().then((response) => {
this.setState({
value: this.state.value,
items: response.data.items,
});
});
this.setState({
value: e.target.value,
items: this.state.items,
});
}
@killEvent
handleSubmit() {
// default prevented
// propagation stopped
alert(`AutoComplete value is: ${this.state.value}`);
}
render() {
const { styles } = this.props;
return (
<div style={styles.container}>
<AutoComplete
value={this.state.value}
items={this.state.items}
onChange={this.handleChange}
style={styles.input}
/>
<button onClick={this.handleSubmit}>
Submit
</button>
</div>
);
}
}
Documentation
Visit docs folder to find the complete list of decorators and their usage.
Change Log
This project adheres to Semantic Versioning. Every upstream release, along with the migration instructions, is documented on the Github Releases page.
Authors
Matteo Basso
Ashley Lake
Copyright and License
Copyright (c) 2016, Matteo Basso.
react-decoration source code is licensed under the MIT License.