react-css-in-js-component

A CSS-in-JS React component helper

Install

npm install --save react-css-in-js-component

What is this for?

This helper can be used with multiple CSS-in-JS libraries, especialy the ones that don't use a component-oriented strategy (those libraries enhance the component primitives instead of parsing and applying class names to elements).

Usage

You must import the default module of react-css-in-js-component and call it as a function to configure your library. Consider doing it on your App container, since it gets place before your app is bootstrapped.

import React from 'react'
import { StyleSheet, css } from 'css-in-js-library' // See supported libraries below
import CSSComponentConfig from 'react-css-in-js-component'

CSSComponentConfig({
  StyleSheet,
  css,
  shouldFlatStyles: true,
})

export default class App extends Component {
  render () {
    return <MyComponent />
  }
}

Then, extend your components using PureComponent or Component from react-css-in-js-component instead of React, that way you can pass a static function called styles and use this.css() method to apply it to your elements.

import React from 'react'
import { Component } from 'react-css-in-js-component'

export default class MyComponent extends Component {
  styles (props) {
    return {
      container: {
        display: 'flex',
        height: '100vh',
      },
      title: {
        fontSize: '24px',
        margin: 'auto',
      },
      titleColor: {
        color: 'tomato',
      },
    }
  }

  render () {
    return (
      <div className={this.css('px')}>
        <h1 className={this.css('title', 'titleColor')}>
          Mangia che te fa bene
        </h1>
      </div>
    )
  }
}

See example folder.

Supported libraries

Each library has its own way to parse stylesheet and css, the following table help you to configure react-css-in-js-component for your preffered library.

• ✅ Supported library
• ❓ Not tested library (yet)
• ❌ Not supported library (yet)

Package	Support	Configuration Notes
aphrodite	✅	Use StyleSheet.create for StyleSheet configuration and css
csx	✅	Use cxs for css and set shouldFlatStyles: true
emotion	✅	Use css from library
glamor	✅	Use css from library
fela	❓
j2c	❓
jss	❓
react-native	❓
rockey	❓
aesthetic	❌
glam	❌
styled-components	❌
styletron	❌

Global styles

Optionally, you can pass globalStyles when configuring react-css-in-js-component. Notice that global styles are considered fallbacks, so if your component has a style with the same name, it will be ignored. Try creating a naming convention to prevent that.

Example:

CSSComponent({
  StyleSheet,
  css,
  globalStyles: {
    mx: {
      marginLeft: 16,
      marginRight: 16,
    }
  }
})
...
  <div className={this.css('mx')} />
...

To do

• Write tests
• Test more libraries
• Make HOC based libraries work
• Make component-oriented libraries work

Thank you

This project is based on @rafaelrinaldi and @leandroferreira efforts to make CSS-in-JS great.

License

MIT © fmedinac