react-styled

ES7 decorator for dynamic stylesheet usage w/ webpack

install

$ npm install bloody-react-styled --save-dev

require

import styled from "bloody-react-styled"

API

@styled(styles) class

styled is a ES7 decorator that applies useable style only if at least one instance of the component it is attached to is in mounted, and removes it when there are no more instances.

how to

first, install style-loader, css-loader and possibility the loader of your choice for a pre/post-processor.

$ npm install --save-dev style-loader css-loader

to configure webpack for that, use in your webpack.config.js :

const config = {
  // ...
  module : {
    loaders : [
      // ...
      {
        test : /\.css$/,
        loaders: [
          // use the useable to only use the stylesheet when necessary
          "style/useable",
          "css",
          // example of css processor you might want to use
          "cssnext",
        ],
      },
    ],
  },
  // ...
}

then you can do

import React, {Component} from "react"
import styled from "bloody-react-styled"

import styles from "./styles.css"

@styled(styles)
class MyComponent extends Component {

  render() {
    return (
      <div className="MyComponent">
        will be styled!
      </div>
    )
  }
}

export default MyComponent

local stylesheets with css-loader

css

:local .default {
  padding: 1rem;
}

js

import React, {Component} from "react"
import styled from "bloody-react-styled"

import styles from "./styles.css"

@styled(styles)
class MyComponent extends Component {

  render() {
    const {locals} = styles
    return (
      <div className={locals.default}>
        will be styled!
      </div>
    )
  }
}

export default MyComponent

license

NES-style CSS Framework | ファミコン風CSSフレームワーク

日本語 / 简体中文 / Español / Português / Русский / Français NES.css is a NES-style(8bit-like) CSS Framework. Installation Styles NES.css is available via ei

Jan 5, 2023

Deploying a React App (created using create-react-app) to GitHub Pages

Deploying a React App* to GitHub Pages * created using create-react-app Introduction In this tutorial, I'll show you how I deployed a React app—which

Dec 31, 2022

A package of small but beautiful React components from the planet, Pluto. 🔵 Get minimal components for your React based applications 😍

React Pluto Component Design System + UI Kit A package of small but beautiful React components from the planet Pluto. To install the latest version, r

Aug 8, 2022

Comments

Change from `componentWillMount` to `componentDidMount`

So we can make this compatible with Universal JS, we must ensure the styles code aren't run on the server side. As server executes componentWillMount, the better would be to change the useability check to the componentDidMount hook on the Component's life cycle.

opened by cusspvz 6
Mount/Unmount count to avoid unstyling

I was thinking on writing a decorator which would enable or disable style/usable webpack modules on mount and unmount... Guess what, you already had! 🎯 THANKS! :D

Just one thing, this could possibly have an issue. I was thinking on having my decorator with a sort of a counter, so it would only unload styles when there aren't components mounted.

One brief example could be a button component, you could have one on a page header, if you enter a page where you have another, it will load styles again, but if you navigate outside of that page, the button o the header would be without styling. And I don't see where you're predicting that behavior on the code yet.

opened by cusspvz 2