k15a/react-sprayer


React Helpers for Sprayer

http://npm.im/react-sprayer

License: Other

Language: JavaScript


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.

Project Statistics

Sourcerank 4
Repository Size 74.2 KB
Stars 0
Forks 0
Watchers 1
Open issues 40
Dependencies 19
Contributors 1
Tags 7
Created
Last updated
Last pushed

Top Contributors See all

Konstantin Pschera

Packages Referencing this Repo

react-sprayer
React Helpers for Sprayer
Latest release 1.1.0 - Updated

Recent Tags See all

v1.1.0 November 16, 2016
v1.0.0 November 16, 2016
v0.3.1 November 15, 2016
v0.3.0 November 15, 2016
v0.2.1 November 01, 2016
v0.2.0 November 01, 2016
v0.1.0 November 01, 2016

Something wrong with this page? Make a suggestion

Last synced: 2017-05-26 20:59:43 UTC

Login to resync this repository