react-stylepack

A style packer for React.js Component

Style your component

Installation

npm install react-stylepack

Usage

Step 1 ) Pack your styles:

Button.css

.button {
  padding: 8px 16px;

  cursor: pointer;

  color: white;
  border: none;
}

.button--disabled {
  cursor: not-allowed;

  background-color: '#e3e3e3';
}

Button.js

import stylepack from '../../../lib/index.js'
import classes from './Button.css'

const colors = {
  primary: '#EA7B4C',
  success: '#38B570',
  danger: '#EA4C4C'
}

const stylesheets = stylepack()
  /* - CSS Modules - */
  .use(classes)
  /* - Inline Style - */
  .use({
    button: {
      backgroundColor: props => props.disabled || colors[props.type] || colors.primary
    }
  })

Step 2 ) Select your style from stylesheets created by stylepack:

const styled = stylesheets.select('button button--disabled~[disabled]')

Step 3 ) Create styled component:

const Button = styled.button

Step 4 ) Finally, use your styled component like this:

<Button type="primary" />
<Button type="success" />
<Button type="danger" />
<Button disabled />