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'import { useFela } from 'preact-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 }} />