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, specialy 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 pass configure your library into it. 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][https://github.com/fmedinac/react-css-in-js-component/tree/master/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 | |-----------------|:-------------:|-------------| | emotion | ✅ | Use css from library | | fela | ❓ | | | jss | ❓ | | | rockey | ❓ | | | styled-components | ❌ | | | aphrodite | ✅ | Use StyleSheet.create for StyleSheet configuration and css| | csx | ✅ | Use cxs for css and set shouldFlatStyles: true | | glam | ❌ | | | glamor | ✅ | Use css from library | | styletron | ❌ | | | aesthetic | ❌ | | | j2c | ❓ | |

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