Note: If you're working with React > 16.3, we highly recommend using the useFela hook instead.
It's more easy and safe to use and also has the best rendering performance. Warning: Does not work in browsers that don't support Proxy(new tab) e.g. IE 11

Sometimes you need/want to pass all the props the to child element but doesn't know them all except the one you use in your rules.

allow you to pass all the props to the child by default except the props used in the rules.

This can be used in different cases:

  • When you don't know exactly all the props you need to pass to the child.
  • If you writing a lib on top of fela and need the component to receive props without forcing the user to specify which props.


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



const title = ({ fontSize, small, color }) => ({
lineHeight: small ? 1.2 : 1.5,
fontSize: fontSize + 'px',
color: color
const Title = createComponentWithProxy(title, 'div')
const Usage = <Title fontSize={23} color='red' data-id="foo" onClick={...}>Hello World</Title>
// => <div className="a b c" data-id="foo" onclick="...">Hello World</div>


Sometimes you need to be able to use a props in your rules and still pass it to the child. That's why

is still available in
. Any props pass in the
will be pass to the child even if you use it in your rules's component.


const input = ({ disabled, fontSize, color }) => ({
fontSize: fontSize + 'px',
color: disabled ? 'grey' : color,
const Input = createComponentWithProxy(input, 'input', ['disabled'])
const Usage = <Input fontSize={23} color="red" disabled />
// => <input className="a b" disabled></input>