useFela
useFela is React hook(new tab) that provides a universal
css
function. It also provides access to both renderer and theme.Arguments
Argument | Type | Default |
---|---|---|
props | Object | An object of props that is used to render rules. |
Returns
(Object): The hook interface
Interface
Property | Type | Description |
---|---|---|
css | function | A function that accepts a list of style object and/or rule and returns a single className. |
theme | Object | The theme object which is passed down via context |
renderer | Renderer | The renderer that is passed down via context |
Imports
Note: Due to lack of support for hooks, useFela is currently only available for react-fela and preact-fela.
import { useFela } from 'react-fela'
Example
function RedOnBlue({ children }) { const { css } = useFela() return ( <div className={css({ backgroundColor: 'blue', color: 'red' })}> {children} </div> )}
Passing props
const rule = ({ color }) => ({ backgroundColor: 'blue', color,})function RedOnBlue({ children, ...otherProps }) { const { css } = useFela(otherProps) return <div className={css(rule)}>{children}</div>}// Usageconst Usage = <RedOnBlue color="red" />
Passing multiple styles
function RedOnBlue({ children, customStyle }) { const { css } = useFela() return ( <div className={css({ backgroundColor: 'blue', color: 'red' }, customStyle)}> {children} </div> )}// Usageconst Usage = <RedOnBlue customStyle={{ fontSize: 12 }} />