FelaComponent

FelaComponent is an alternative component to the createComponent-HoC leveraging the render-props pattern. It uses FelaTheme internally in order to access the theme directly.

Props

Property Type Default Description
customClass string class(es) to prepend before the generated classes
style StyleObject
Function
Either a valid style object or a function of theme
rule Function A function of theme and props
render string?
Function
div Either a render function or a string primitive to render into.
If passing a render function is receives the specified render interface.

Interface

Property Type Default Description
className string The class names for the rendered style object
theme Object {} The theme object which is passed down via context

Imports

import { FelaComponent } from 'react-fela'
import { FelaComponent } from 'preact-fela'
import { FelaComponent } from 'inferno-fela'

Example

<FelaComponent
  style={{
    backgroundColor: 'blue',
    color: 'red'
  }}
  render={({ className, theme }) => (
    <div className={className}>I am red on blue.</div>
  )}
/>

Generic Components

In order to create dynamically styled components using props, just like createComponent, we can create a component that itself renders a FelaComponent.

const Button = ({ color, big = false, text }) => (
  <FelaComponent
    style={{
      backgroundColor: color,
      fontSize: big ? 18 : 15
    }}
    render={({ className }) => (
      <button className={className}>{text}</button>
    )}
  />
)

Using Theme

To access theme properties, we can simply pass a function of theme.

<FelaComponent
  style={theme => ({
    backgroundColor: theme.bgPrimary,
    color: 'red'
  })}
  render={({ className, theme }) => (
    <div className={className}>I am red on {theme.bgPrimary}.</div>
  )}
/>

Style Rule as a Function of Props and Theme

Sometimes it is desirable to style a component as a function of both theme and props. The rule prop takes a callback, and passes it an object with theme and all props passed to FelaComponent except "style", "render" and "rule".

This provides an API that is both compatible with createComponent, and allows using an externally defined function in such use cases. Hopefully, this can be help performance in hot paths by not requiring a function to be created on every render.

const ruleFunction = ({ theme, bgc }) => ({
  backgroundColor: bgc || 'red',
  color: theme.bgPrimary,
})

<FelaComponent
  bgc='blue',
  rule={ruleFunction}
  render={({ className, theme }) => (
    <div className={className}>I am {theme.bgPrimary} on {bgc || 'red'}.</div>
  )}
/>

Shorthand Primitives

Instead of a render function, we can also specify a primitive element to render into.
Children will automatically be passed down. If not specified at all, it will render into a div.

<FelaComponent
  style={{
    backgroundColor: 'blue',
    color: 'red'
  }}
  render='span'
>
  I am red on blue
</FelaComponent>

Add Custom Classes

The common use case of needing to add a custom class to the generated ones, e.g. for integration with 3rd party libraries, can be handled using the customClass prop.

<FelaComponent
  customClass="my-custom-class"
  style={{ color: 'red' }}
>
  I am red and have a custom class
</FelaComponent>
// <div class="my-custom-class a">
//  I am red and have a custom class
// </div>

results matching ""

    No results matching ""