react-decoration editorconfig eslint travis-ci npm webpack

A collection of decorators for React Components

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 {
  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>
    );
  }
}

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

Copyright and License

Copyright (c) 2016, Matteo Basso.

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

Related Repositories

react-css-modules

react-css-modules

Seamless mapping of class names to CSS modules inside of React components. ...

react-hn

react-hn

Learn React by building the Hacker News front page ...

build-a-hn-front-page

build-a-hn-front-page

Learn React & Webpack by building a hacker news front page ...

react-keydown

react-keydown

Lightweight keydown wrapper for React components ...

material-ui-sass

material-ui-sass

The Sass counterpart of the material-ui framework for React ...


Top Contributors

mbasso winstonewert

Releases

-   1.4.1 zip tar
-   1.4.0 zip tar
-   1.3.1 zip tar
-   1.3.0 zip tar
-   1.2.0 zip tar
-   1.1.0 zip tar
-   1.0.1 zip tar
-   1.0.0 zip tar