createComponentWithProxy

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. 

createComponentWithProxy
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.

Imports

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

Example

Title.js

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>

Tips

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

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

Input.js

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>