CSS in JS with Style

npm install --save-dev sprayer react-sprayer react

Sprayer allows you to write modular, scoped CSS with all the features of JavaScript template strings. It is heavily influenced by CSS Modules, styled-components and CSJS.

Features

• Write your styles with the syntax you already know
• Automatically Scoped: No need to worry about duplicate class names
• Tooling free: You only need an ES2015 environment
• Small: Only ~11KB minified and gzipped (sprayer + react-sprayer)
• Dynamic styles: Write you CSS once and change it with props
• Theming support

Coming soon

• Server rendered JavaScript support
• Linting with StyleLint
• Autoprefix, PostCSS, SASS, Styles and LESS support via a babel-plugin
• Syntax highlighting

Missing something?

Create an issue 👍

Example

Checkout react-sprayer-example for a full working example.

import React from 'react'
import sprayer from 'sprayer'
import { withStyle } from 'react-sprayer'

// Create a spray
const spray = sprayer`
    .headline {
        color: darkcyan;
        font-size: ${(props) => props.fontSize}rem;
        /*           ^^^^^^^^^^^^^^^^^^^^^^                                              */
        /* This interpolation will be called with the props you passed to your component */
    }
`

// Create a component
const Headline = ({ classes }) => <h1 className={classes.headline}></h1>

// Connect the component with the spray
export default withStyle(spray)(Headline)

Sprayed Components

import sprayed from 'react-sprayer'

// Create a sprayed component
const ErrorMessage = sprayed.span`
  .style {
    color: red;
  }
`

export default ErrorMessage

Theming

import React from 'react'
import sprayed, { ThemeProvider } from 'react-sprayer'

// Create a sprayed component
const Button = sprayed.button`
  .style {
    color: ${(_, theme) => theme.primary};
  }
`

const App = () => (
  <ThemeProvider theme={{ primary: 'red' }}>
    <ErrorMessage />
  </ThemeProvider>
)

export default App

API

withStyle

import withStyle from 'react-sprayer'

withStyle(spray, ?mapPropsToStyle)(Component)

The withStyle function takes a spray as the first argument. You should pass a spray you created with sprayer. As second argument it takes a function which maps the props to the parameters passed to the spray as first argument. If you don't pass a second function withStyle will take all props and pass them to the spray. The withStyle function returns a function which takes a component. It passes all props and generated classes to this component and then then returns another component which you can use like any other React component.

classesPropTypes

import { classesPropTypes } from 'react-sprayer'

Headline.propTypes = {
    classes: classesPropTypes
}

This is just a little helper you can use to validate the classes propType.

Want to help?

I would highly appreciate if you want to help me with this project. Check out the issues with the help wanted label to see where your help is needed.