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
Argument | Type | Default | Description |
---|---|---|---|
component | Component(new tab) | A valid React component that gets enhanced. | |
propName | string? |
| 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
-HoC and access the theme via props.withTheme
- Another way to access theme inside a custom component would be to pass in the component to createComponent and access theme object via props.