https://github.com/austinsc/react-style-decorator

ES7 decorator for attaching stylesheets to a component's lifecycle.
https://github.com/austinsc/react-style-decorator

Last synced: 7 days ago
JSON representation

ES7 decorator for attaching stylesheets to a component's lifecycle.

• Host: GitHub
• URL: https://github.com/austinsc/react-style-decorator
• Owner: austinsc
• License: mit
• Created: 2016-01-18T18:46:34.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-07-01T13:31:43.000Z (over 5 years ago)
• Last Synced: 2023-12-24T20:05:52.803Z (11 months ago)
• Language: JavaScript
• Homepage:
• Size: 21.5 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](http://img.shields.io/travis/RoviSys/react-style-decorator.svg?style=flat)](https://travis-ci.org/RoviSys/react-style-decorator)

[![Code Climate](https://codeclimate.com/github/RoviSys/react-style-decorator/badges/gpa.svg)](https://codeclimate.com/github/RoviSys/react-style-decorator)

[![Test Coverage](https://codeclimate.com/github/RoviSys/react-style-decorator/badges/coverage.svg)](https://codeclimate.com/github/RoviSys/react-style-decorator)

[![Dependency Status](https://david-dm.org/RoviSys/react-style-decorator.svg)](https://david-dm.org/RoviSys/react-style-decorator)

[![devDependency Status](https://david-dm.org/RoviSys/react-style-decorator/dev-status.svg)](https://david-dm.org/RoviSys/react-style-decorator#info=devDependencies)

# react-style-decorator

 > ES7 decorator for attaching a reffable style to the component lifecycle.

## Installation

Run `npm install --save react-style-decorator` and then use the default export of the module.

## Purpose

The purpose of the module is to provide an easy way to attach a reffable style to a component lifecyle.

## Example 

 

Using the style decorator, you can attatch a stylesheet to a component like this:

```javascript

import Style from 'react-style-decorator';

@Style(require('css/my-component.css'))

class MyComponent extends Component {

  render() {

    return (

      
Example


    );

  }

}

```


The above example assumes that you are using webpack's [style-loader](https://github.com/webpack/style-loader) with the `/usable` option. This converts the stylesheet into a javascript module that has a reference counting feature. [Click here](https://github.com/webpack/style-loader#reference-counted-api) for more information about the reference counting feature.

This decorator also supports variadic style arguments, so you can pass as many stylesheets into the decorator that you want:

```javascript

import Style from 'react-style-decorator';

@Style(require('css/my-component1.css'), require('css/my-component2.css'), require('css/my-component3.css'))

class MyComponent extends Component {

  render() {

    return (

      
Example


    );

  }

}

```