@awesomecss/reactor NPM

🌟 Reactor

A simple way to include CSS with React Components.

Tiny, at ~2kb gzipped
Zero dependencies! (Assuming you already have React)
Write native CSS. Period.
Easily integrate with your setup. No extra webpack-loaders required.

🔧 Installation

npm install --save @awesomecss/reactor

🕹 Usage

Step 1: Import `withStyles` from Reactor

import React from 'react'
import { withStyles } from '@awesomecss/reactor'

Step 2: Define your styles

Write your CSS styles as a string. This is default out-of-the-box CSS. Use things like :hover, @media queries, as you normally would!

const css = `
  .Button {
    background: white;
    border: 1px solid #eee;
  }
`

Note: You can of course use string interpolation. It's still JS after all!

Step 3: Create your component

Create your component as you normally would.

const Button = props => (
  <button className='Button' {...props} />
)

Note: The reference the CSS className to match the CSS you wrote. Reactor does not generated uniquely hashed classNames for you. See CSS Modules for that feature.

Step 4: Compose your CSS with your component

When exporting your component, compose it with the withStyles higher-order component along with your CSS styles.

export default withStyles(css)(Button)

Final code

import React from 'react'
import { withStyles } from '@awesomecss/reactor'

const css = `
  .Button {
    background: white;
    border: 1px solid #eee;
  }
`

const Button = props => (
  <button className='Button' {...props} />
)

export default withStyles(css)(Button)

Results

<html>
  <head>
    <style type='text/css'>
    .Button {
      background: white;
      border: 1px solid #eee;
    }
    </style>
  </head>
  <body>
    ...
    <button class='Button'>Button</button>
    ...
  </body>
</html>

That's it! You're done 🙌. You've created a CSS-ready component.

Dynamic styles

You can define dynamic styles by passing a function into withStyles. It will have access to a component's props, allowing you to define custom rules for various prop values.

Example

const Card = props => (<div {...props} />)
const css = (props) => `
  div {
    background: ${props.title ? 'red' : 'blue'};
    position: relative;
    border: 1px solid black;
  }
`
const StyledCard = withStyles(css)(Card)

This technique is similar to the ones found in Styled Components.