Skip to content
A simple way to add CSS classes to React components.
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.travis.yml
README.md
package-lock.json
package.json
tsconfig.json

README.md

React Dye

Build Status

A simple way to add CSS classes to React components.

  • This is not a CSS framework!
  • This is not a way to generate CSS by writing JS code!
  • This is a simple function to avoid writing className in JSX.

Installation

npm i react-dye
// or
yarn add react-dye

Usage examples

Replacing simple tags with custom components

Before

const MyComponent = () => (
  <div className="container centered">
    <form className="inline-form with-border">
      <input className="large-input rounded" type="text" name="username" />
      <input className="large-input rounded" type="password" name="password" />
      <button className="button primary-button">Sign in</button>
    </form>
  </div>
)

After

import dye from 'react-dye'

const MyComponent = () => (
  <Container>
    <InlineForm>
      <LargeInput type="text" name="username" />
      <LargeInput type="password" name="password" />
      <PrimaryButton>Sign in</PrimaryButton>
    </InlineForm>
  </Container>
)

const Container = dye('container centered')
const InlineForm = dye('inline-form with-border', 'form')
const LargeInput = dye('large-input rounded', 'input')
const PrimaryButton = dye('button primary-button', 'button')

Composing CSS classes

Before

const MyComponent = () => (
  <Fragment>
    <button className="button with-padding with-margin rounded default-button">
      Cancel
    </button>
    <button className="button with-padding with-margin rounded primary-button">
      Confirm
    </button>
  </Fragment>
)

After

import dye from 'react-dye'

const MyComponent = () => (
  <Fragment>
    <DefaultButton>Cancel</DefaultButton>
    <PrimaryButton>Confirm</PrimaryButton>
  </Fragment>
)

const Button = dye('button with-padding with-margin rounded', 'button')
const DefaultButton = dye('default-button', Button)
const PrimaryButton = dye('primary-button', Button)

Dynamic CSS classes

Before

import classnames from 'classnames'

const MyComponent = () => (
  <Fragment>
    <Button>Enabled</Button>
    <Button disabled>Disabled</Button>
    <Button beta>Beta Button</Button>
  </Fragment>
)

const Button = ({beta, disabled, ...props}) => (
  <button
    className={classnames('button with-padding with-margin rounded', {
      'beta-button': beta,
      'disabled-button': disabled
    })}
    disabled={disabled}
    {...props}
  />
)

After

import classnames from 'classnames'
import dye from 'react-dye'

const MyComponent = () => (
  <Fragment>
    <Button>Enabled</Button>
    <Button disabled>Disabled</Button>
    <Button beta>Beta Button</Button>
  </Fragment>
)

const Button = dye(
  ({disabled, beta}) =>
    classnames('button with-padding with-margin rounded', {
      'beta-button': beta,
      'disabled-button': disabled
    }),
  'button',
  'beta' // this prop is not passed to 'button'
)

API Reference

function dye(cssClasses, [Component, [...styleProps]])

cssClasses: specifies the css classes to use. If it's a function, it will be called with the component's props and should return the css classes.

Component: the component can be a string (like 'input') or a React component. The default value is 'div'.

styleProps: the props which are only used to generate the css classes. They will not be passed to the component.

Contributing

Feel free to open issues or submit Pull requests :D

You can’t perform that action at this time.