connect

Note: If you're working with React > 16.3, we highly recommend using the useFela hook instead.
It's more easy and safe to use and also has the best rendering performance. A HoC (Higher-order Component(new tab)) that provides the ability to map rendered classes to the component's props using the 

styles
key. It is especially useful if we want to style a huge tree of primitive DOM elements e.g. doing basic layouting. This HoC produces a pure component. Behavior by default can be disabled using the configuration parameter.

Arguments

ArgumentTypeDescription
rulesObject or FunctionAn object containing named rules or a function that produces such an object based on the props of a component.
configObject?An object containing settings to configure Wrapper Component.

Configuration parameters

ParameterTypeDefaultDescription
pureboolean
true
A parameter that enables / disables the behavior when the output component is pure.

Returns

(Function): Component connector that passes the 

styles
, 
rules
and 
theme
props to a component.

Provided properties

PropertyTypeDescription
stylesObjectAn object containing class names by keys.
rulesObjectAn object containing style rules by keys (used for extend inner components).
themeObjectAn object containing the style theme, if provided.

Imports

import { connect } from 'react-fela'
import { connect } from 'preact-fela'
import { connect } from 'inferno-fela'

Example

Header.js

const Header = ({ title, styles }) => (
  <header className={styles.container}>
    <h1 className={styles.text}>{title}</h1>
  </header>
)
const container = (props) => ({
  textAlign: 'center',
  padding: '20px',
  height: '200px',
})
const text = (props) => ({
  lineHeight: 1.2,
  fontSize: props.size,
  color: props.color,
})
const ConnectedHeader = connect({
  container,
  text,
})(Header)
// Usage
const Usage = <ConnectedHeader title="Hello World" color="red" size="17px" />

Using a Function of Props

Header.js

const Header = ({ title, styles }) => (
  <header className={styles.container}>
    <h1 className={styles.text}>{title}</h1>
  </header>
)
const rules = ({ size, color }) => ({
  container: {
    textAlign: 'center',
    padding: '20px',
    height: '200px',
  },
  text: {
    lineHeight: 1.2,
    fontSize: size,
    color: color,
  },
})
const ConnectedHeader = connect(rules)(Header)
// Usage
const Usage = <ConnectedHeader title="Hello World" color="red" size="17px" />

Disabling Pure Component Behavior

const ConnectedHeader = connect(rules, { pure: false })(Header)

Extending Styles

To extend the styles that are injected through the 

connect
, there are several ways.

Extend Property

It's possible to extend component styles with an 

extend
prop that can be either an object or a function.

Header.js

const Header = ({ title, styles }) => (
  <header className={styles.container}>
    <h1 className={styles.text}>{title}</h1>
  </header>
)
const rules = ({ size, color }) => ({
  container: {
    textAlign: 'center',
    padding: '20px',
    height: '200px',
  },
  text: {
    lineHeight: 1.2,
    fontSize: size,
    color: color,
  },
})
const ConnectedHeader = connect(rules)(Component)
const extend = ({ bgColor }) => ({
  container: {
    backgroundColor: bgColor,
    padding: '30px',
  },
  text: {
    fontWeight: 700,
  },
})
// Usage
const Usage = (
  <ConnectedHeader
    title="Hello World"
    size="17px"
    color="red"
    bgColor="blue"
    extend={extend}
  />
)

Reconnection Pattern

Instead of directly passing an 

extend
object, one can also use the reconnection pattern to achieve the same effect.

Header.js

const Header = ({ title, styles }) => (
  <header className={styles.container}>
    <h1 className={styles.text}>{title}</h1>
  </header>
)
const rules = ({ size, color }) => ({
  container: {
    textAlign: 'center',
    padding: '20px',
    height: '200px',
  },
  text: {
    lineHeight: 1.2,
    fontSize: size,
    color: color,
  },
})
const ConnectedHeader = connect(rules)(Component)
const extend = ({ bgColor }) => ({
  container: {
    backgroundColor: bgColor,
    padding: '30px',
  },
  text: {
    fontWeight: 700,
  },
})
const ExtendedHeader = connect(extend)(ConnectedHeader)
// Usage
const Usage = (
  <ExtendedHeader title="Hello World" size="17px" color="red" bgColor="blue" />
)

Proxying and Rules Property

If you want to proxy the rules for child components, you can use the 

rules
property on inside the component. This is also convenient when you do not want to inline the styles that you plan to use for the extension.

Header.js

const Header = ({ title, styles }) => (
  <header className={styles.container}>
    <h1 className={styles.text}>{title}</h1>
  </header>
)
const rules = ({ size, color }) => ({
  container: {
    textAlign: 'center',
    padding: '20px',
    height: '200px',
  },
  text: {
    lineHeight: 1.2,
    fontSize: size,
    color: color,
  },
})
const ConnectedHeader = connect(rules)(Header)
const extend = ({ bgColor }) => ({
  container: {
    backgroundColor: bgColor,
    padding: '30px',
  },
  text: {
    fontWeight: 700,
  },
})
const HeaderProxy = ({ rules }) => (
  <ConnectedHeader size="17px" extend={rules} />
)
const ExtendedHeader = connect(extend)(HeaderProxy)
// Usage
const Usage = <ExtendedHeader title="Hello World" color="red" bgColor="blue" />

The injected 

rules
property is the resulting multi-rule, which was also used to resolve the 
styles
object. It is injected in order to give the parent component the ability to control the styling of the child components on the basis of its own style.