❄️ Fancy

A simple way to include CSS with React Components.

• Emotion, under the hood.
• Write plain ol' CSS. Period.
• Pre-processing when you need it. Powered by Stylis.
• Integrate with ease into your existing setup. No fiddling with Webpack required.
• iFrame support, out-of-the-box!
• Theming support!
• Scoping, to integrate into older (more hostile) CSS systems.

🔧 Installation

npm install --save @helpscout/fancy

🕹 Usage

Here's a quick example of how you can compose regular CSS with your React components.

import React from 'react'
import styled from '@helpscout/fancy'

const Button = props => {
  const { children, styles, ...rest } = props

  <button className={styles.Button} {...rest}>
    {children}
  </button>
}

export default styled(Button)`
  background: white;
  border: 1px solid #eee;
`

📘 Documentation

View the docs to get started with Fancy!

💼 Migration

• From v1.x to v2.x
• From v0.x to v1.x

❤️ Credit

Many thanks to the folks who built Emotion and Styled Components.