{"library":"react-fela","title":"React Fela Bindings","description":"react-fela provides the official React bindings for the Fela dynamic styling library. It facilitates CSS-in-JS styling within React applications, leveraging Fela's core capabilities for atomic CSS generation, performance optimization, and server-side rendering. The current stable version is 12.2.1, with a consistent release cadence that includes minor feature additions, TypeScript improvements, and bug fixes across patch versions. Key differentiators include its focus on a functional, atomic CSS approach, robust plugin system (enhanced with context-free plugins in v12), and efficient rehydration mechanisms. It assumes familiarity with the core Fela library for its effective use within a React ecosystem.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-fela"],"cli":null},"imports":["import { useFela } from 'react-fela'","import { RendererProvider } from 'react-fela'","import { ThemeProvider } from 'react-fela'","import { createRenderer } from 'fela'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createRenderer } from 'fela';\nimport { RendererProvider, ThemeProvider, useFela } from 'react-fela';\nimport { useState } from 'react';\n\nconst renderer = createRenderer();\n\nconst theme = {\n  primary: 'blue',\n  secondary: 'green',\n  spacing: 16,\n};\n\ntype ButtonProps = {\n  onClick: () => void;\n  children: React.ReactNode;\n};\n\nconst Button: React.FC<ButtonProps> = ({ onClick, children }) => {\n  const { css } = useFela((props: { primaryColor: string }) => ({\n    button: {\n      backgroundColor: props.primaryColor,\n      color: 'white',\n      padding: `${theme.spacing / 2}px ${theme.spacing}px`,\n      borderRadius: '4px',\n      border: 'none',\n      cursor: 'pointer',\n      fontSize: '16px',\n      '&:hover': {\n        opacity: 0.8,\n      },\n    },\n  }));\n\n  return (\n    <button className={css('button', { primaryColor: theme.primary })} onClick={onClick}>\n      {children}\n    </button>\n  );\n};\n\nconst App: React.FC = () => {\n  const [count, setCount] = useState(0);\n\n  return (\n    <RendererProvider renderer={renderer}>\n      <ThemeProvider theme={theme}>\n        <div style={{ fontFamily: 'sans-serif', padding: theme.spacing }}>\n          <h1>Fela with React Example</h1>\n          <p>Count: {count}</p>\n          <Button onClick={() => setCount(prev => prev + 1)}>Increment</Button>\n          <div className={useFela(() => ({\n            marginTop: theme.spacing,\n            color: theme.secondary,\n            fontSize: '14px'\n          }))().css({})}>\n            Styled with `useFela` hook directly on a div.\n          </div>\n        </div>\n      </ThemeProvider>\n    </RendererProvider>\n  );\n};\n\nexport default App;","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}