Skip to content

❄️Fancy: A simple way to include CSS with React Components.

License

Notifications You must be signed in to change notification settings

helpscout/fancy

Repository files navigation

❄️ Fancy

npm version Build Status Coverage Status npm version node npm

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

❤️ Credit

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