Cloudflare Style Provider
In order to support cf-ui (fela based components) in your project, you need to wrap your app by our StyleProvider. Check out the main README.md to see it in use. This package also provides testing utilities. Our fela setup consists of many plugins, enhancers and themes. To ensure that everything has the same context and works properly, you should never use packages as
cf-style-const directly. Always use
$ npm install cf-style-provider
import StyleProvider from 'cf-style-provider';;
props and default values
- dev: false, in dev mode it applies more Fela plugins (validator, beautifier, monolithic)
- renderer: undefined, StyleProvider creates fela renderer internally but sometimes you might want to inject your own instance if you need to expose other renderer's APIs (e.g. for testing) or to ensure that there is only single instance of fela renderer in your application
- rehydrate: value comes from context This prop is used for server side rehydration of Fela styles. This prop should be turned off when rendering Fela components outside of root rendererer hierarchy to avoid class name collisions. If unsure, use
Dev mode produces developer friendly output (CSS is formatted), validates all rules and merges atomic classNames into one. Fela automatically creates
<style> nodes in
<head> node and injects the styles.
Or you can just get Fela's renderer (useful for server-side rendering)
import ReactDOMServer from 'react-dom/server';import Provider from 'react-fela';import createRenderer from 'cf-style-provider';// default valuesconst renderer =;const body = ReactDOMServer;renderer; // returns CSS as a string
For testing. HOC that passes fela renderer and base theme into the context. Handy for testing with enzyme. However, if your goal is to use Enzyme with Fela, You should probably use felaShallow or felaMount instead, they provide a better abstraction .
For testing. Internally felaTestContext. It deep renders the component and returns snapshots of DOM and styles as a object with properties
styles. However, if your goal is to use Enzyme with Fela, You should probably use felaShallow or felaMount instead, they provide a better abstraction.
Use it like this:
Used Fela plugins
We use multiple fela plugins that extend typical CSS-in-JS syntax. Check them out for more details:
We have a set of configured media queries. Please, use them!
mobile: @media (min-width: 13.6em) mobileWide: @media (min-width: 30.4em) tablet: @media (min-width: 47.2em) desktop: @media (min-width: 64em) desktopLarge: @media (min-width: 97.6em)
const Column =