Socket
Book a DemoInstallSign in
Socket

@awesomecss/reactor

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@awesomecss/reactor

A simple way to include CSS with React Components

latest
Source
npmnpm
Version
0.3.0
Version published
Weekly downloads
2
100%
Maintainers
1
Weekly downloads
 
Created
Source

🌟 Reactor npm version Build Status Coverage Status

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.

Keywords

awesomecss

FAQs

Package last updated on 02 May 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts