withTheme

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.

Injects the theme object, that is passed down using a ThemeProvider, into a component's props. It will automatically rerender the component if the theme changes. This even works if any parent component implements

shouldComponentUpdate
.

Arguments

ArgumentTypeDefaultDescription
componentComponent(new tab)A valid React component that gets enhanced.
propNamestring?
theme
An alternative name that is used to pass the theme.

Imports

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

Example

const Component = ({ theme }) => <div>The primary color is {theme.primary}</div>
const ComponentWithTheme = withTheme(Component)

Tips & Tricks

  • If components were accessing theme object directly via context before, this would not be possible since 6.0 release. You would have to wrap the component with the
    withTheme
    -HoC and access the theme via props.
  • Another way to access theme inside a custom component would be to pass in the component to createComponent and access theme object via props.