react-slot-fill
react-slot-fill copied to clipboard
fillChildProps cannot pass functions through to fill
Passing functions through to fills is currently not possible. Instead they are called during the transform step:
const value = fillChildProps[key]; if (typeof value === 'function') { acc[key] = () => value(fill, this.fills); } else { acc[key] = value; }
This prevents us from passing callbacks like onChange
into fills.
Reading the readme, this seems to be by design:
/** * Props to be applied to the child Element of every fill which has the same name. * * If the value is a function, it must have the following signature: * (target: Fill, fills: Fill[]) => void; * * This allows you to access props on the fill which invoked the function * by using target.props.something() */ fillChildProps?: {[key: string]: any}
Could you please help me understand why this is the case? If the main use case is to get a 'ref' to the fill, wouldn't it be nicer and less limiting to make that a separate property?
I honestly forget. Can you look in the "advanced" example to see if it's being utilized? If you want to redesign this bit can you update the example?