Need private packages and team management tools?Check out npm Teams »

react-sprayer

1.1.0 • Public • Published

Sprayer

CSS in JS with Style

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

npm Build Status codecov dependencies Status devDependencies Status Twitter

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.

Install

npm i react-sprayer

DownloadsWeekly Downloads

0

Version

1.1.0

License

MIT

Last publish

Collaborators

  • avatar