@kingstinct/react-decoration

This is a simple fork of react-decoration without the perf decorator and without the react-addons-perf dependency to be fully compatible with React Native. An even better solution would be to use a performance library that works with React Native.

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 release, along with the migration instructions, is documented on the Github Releases page.

Authors

Matteo Basso

• github/mbasso
• @Teo_Basso

Copyright and License

Copyright (c) 2016, Matteo Basso.

react-decoration source code is licensed under the MIT License.