cf-style-container

cf-style-container

Cloudflare Style Container

Set of high order components and other helpers for fela based applications.

Installation

$ npm install cf-style-container

Aliased functions from fela and react-fela

We proxy/alias some useful functions from fela without changing their behaviour. See the original documentation for more details. We wrap all Fela APIs so we can eventually switch Fela to a different CSS in JS lib if ever needed.

• combineRules
• connect
• ThemeProvider

createComponent(rule, [type])

Very similar to createComponent from react-fela. However, it automatically adds PropTypes from [type] in case that it is a React Component.

You should use this HOC every time when you want to use Fela in your component and you need only one className (one rule function).

import React from 'react';
import PropTypes from 'prop-types';
import { createComponent } from 'cf-style-container';

const styles = ({ theme, size }) => ({
  fontWeight: theme[`fontWeight${size}`],
  fontSize: theme[`fontSize${size}`],
  lineHeight: theme[`lineHeight${size}`],
  marginTop: theme[`marginTop${size}`]
});

const Heading = ({ size, className, children }) => {
  const tagName = 'h' + size;
  return React.createElement(tagName, { className }, children);
};

Heading.propTypes = {
  size: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
  className: PropTypes.string.isRequired,
  children: PropTypes.node
};

export default createComponent(styles, Heading);

createComponentStyles(rules, Component)

Useful when you need multiple classNames (and rules) in one component.

import React from 'react';
import PropTypes from 'prop-types';
import { createComponentStyles } from 'cf-style-container';

const mainStyles = ({ theme }) => ({
  margin: theme.main.margin,
  padding: theme.main.padding,
});

const legendStyles = ({ theme }) => ({
  padding: theme.legend.padding,
  marginBottom: theme.legend.marginBottom,
  borderBottom: theme.legend.borderBottom,
});

const FormFieldset = ({ legend, styles }) => (
  <fieldset className={styles.mainStyles}>
    {' '}
    <legend className={styles.legendStyles}>
      {legend}
    </legend>
  </fieldset>
);

FormFieldset.propTypes = {
  styles: PropTypes.object.isRequired,
  legend: PropTypes.string.isRequired
};

export default createComponentStyles({ mainStyles, legendStyles }, FormFieldset);

Notice that rules are now an object. The names you chose will be used for classNames accessible as styles.mainStyles and styles.legendStyles in this case.

applyTheme(Component, ...themes)

And HOC that ties a Fela component with the theme (adds the theme to its context).

import HeadingUnstyled from './Heading';
import HeadingTheme from './HeadingTheme';

import { applyTheme } from 'cf-style-container';

// overrides HeadingTheme fontWeight1
const CustomTheme = () => { fontWeight1: 600 };

const Heading = applyTheme(HeadingUnstyled, HeadingTheme, CustomTheme);

// themed component
<Heading />