react-slot-fill icon indicating copy to clipboard operation
react-slot-fill copied to clipboard

fillChildProps cannot pass functions through to fill

Open TimoStaudinger opened this issue 7 years ago • 1 comments

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?

TimoStaudinger avatar Oct 12 '17 20:10 TimoStaudinger

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?

camwest avatar Nov 03 '17 04:11 camwest