❄️Fancy: A simple way to include CSS with React Components.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
.vscode
docs
src
stories
.babelrc
.eslintignore
.eslintrc
.flowconfig
.gitignore
.npmignore
.nvmrc
.prettierignore
.prettierrc.yml
.travis.yml
LICENSE
README.md
SUMMARY.md
jest.config.js
package-lock.json
package.json

README.md

❄️ 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.