JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    React Decoration

    A collection of decorators for React Components
    Filed under 

    • 🔾22%Overall
    • 614
    • 34.3 days
    • 🕩27
    • 👥3

    react-decoration

    Build
Status npm
version npm
downloads Coverage
Status Join the chat at
https://gitter.im/mbasso/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 (c) 2016, Matteo Basso.

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

    Show All