Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
useFela
✓ import { useFela } from 'react-fela'
✗ import useFela from 'react-fela'
A named export hook for functional components to access the renderer and theme context. Used extensively in modern React Fela applications.
RendererProvider
✓ import { RendererProvider } from 'react-fela'
✗ const { RendererProvider } = require('react-fela')
Required to provide the Fela renderer instance to the entire React component tree. CommonJS `require` is generally discouraged due to ecosystem shift to ESM.
ThemeProvider
✓ import { ThemeProvider } from 'react-fela'
✗ import { ThemeProvider as FelaThemeProvider } from 'react-fela'
Used to pass a theme object down the React tree via context. While aliasing is not inherently wrong, it's not the default usage.
createRenderer
✓ import { createRenderer } from 'fela'
✗ import { createRenderer } from 'react-fela'
The `createRenderer` function comes directly from the core `fela` package, not `react-fela` itself. This is a common mis-import.
This quickstart demonstrates the basic setup of Fela with React using the `useFela` hook, `RendererProvider`, and `ThemeProvider` to apply dynamic styles and theme values in a functional component.
import { createRenderer } from 'fela';
import { RendererProvider, ThemeProvider, useFela } from 'react-fela';
import { useState } from 'react';
const renderer = createRenderer();
const theme = {
primary: 'blue',
secondary: 'green',
spacing: 16,
};
type ButtonProps = {
onClick: () => void;
children: React.ReactNode;
};
const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
const { css } = useFela((props: { primaryColor: string }) => ({
button: {
backgroundColor: props.primaryColor,
color: 'white',
padding: `${theme.spacing / 2}px ${theme.spacing}px`,
borderRadius: '4px',
border: 'none',
cursor: 'pointer',
fontSize: '16px',
'&:hover': {
opacity: 0.8,
},
},
}));
return (
<button className={css('button', { primaryColor: theme.primary })} onClick={onClick}>
{children}
</button>
);
};
const App: React.FC = () => {
const [count, setCount] = useState(0);
return (
<RendererProvider renderer={renderer}>
<ThemeProvider theme={theme}>
<div style={{ fontFamily: 'sans-serif', padding: theme.spacing }}>
<h1>Fela with React Example</h1>
<p>Count: {count}</p>
<Button onClick={() => setCount(prev => prev + 1)}>Increment</Button>
<div className={useFela(() => ({
marginTop: theme.spacing,
color: theme.secondary,
fontSize: '14px'
}))().css({})}>
Styled with `useFela` hook directly on a div.
</div>
</div>
</ThemeProvider>
</RendererProvider>
);
};
export default App;
Errors
Common errors & fixes
Error: Fela renderer not found. Make sure to wrap your application with `RendererProvider`.
The Fela renderer instance was not provided to the React component tree via the `RendererProvider`.
fixWrap your root component or the section using Fela styles with `<RendererProvider renderer={myRendererInstance}>...</RendererProvider>`. TypeError: Cannot read properties of undefined (reading 'theme')
A component attempted to access `theme` from the Fela context, but `ThemeProvider` was not used or the theme object was not provided.
fixEnsure your components are wrapped with `<ThemeProvider theme={myThemeObject}>...</ThemeProvider>` and that `myThemeObject` is a valid theme object. Module not found: Can't resolve 'fela' in '.../node_modules/react-fela/lib'
The core `fela` package, a peer dependency of `react-fela`, is not installed or cannot be resolved by the module bundler.
fixInstall the core Fela package by running `npm install fela` or `yarn add fela`.
Audit
Dependencies
felarequiredCore Fela renderer library required for all Fela operations.
reactrequiredReact framework is required as this package provides React bindings.