gnapse / render-props-compose Goto Github PK

Hi there! Really cool lib here! I recently made a similar lib, React Composer. Maybe we can join efforts and unify the community around one component?

If not, no worries. Thanks for reading ✌️

I ported the demo into Preact: https://codesandbox.io/s/kw9yy439yv

Preact treats children differently. Its always an array preactjs/preact-compat#366

We make easily make this work for React and Preact by checking if children is an array of length 1 with a function, and pop it out. I'll get PR up

Enable using the composed function like this:

const CounterWithTimer = compose({
  myCounter: Counter,
  timeElapsed: Timer,
});

<CounterWithTimer>
  {({ myCounter, timeElapsed }) => (
    {/* ... */}
  )}
</CounterWithTimer>

Or alternatively the Composed component like this:

<Composed
  components={{
    clicks: Counter,
    ticks: Timer,
    position: Mouse,
  }}
>
  {({ clicks, ticks, position }) => (
    {/* ... */}
  )}
</Composed>

This allows the render prop function to expect a single props argument instead of a list of positional arguments.

If implemented, this should not replace the current way this utility works. Passing the components to compose as a list, and having the render prop function receive a list of positional arguments is still the preferred way to use this functionality.

This will probably be a test rendering something similar to the demo, and asserting in the test that what's rendered by the render prop contains what's expected, and that all the interactions with the rendered stuff works as expected. That will effectively assert that the props from the composed components are correctly passed to the render prop, which is the main goal of this utility.

So far we only have this, which is where I prototyped this concept before turning it into a npm package.

At first I plan to at least convert that live running example to use the composable components used in this repo's demo app (the Counter, Timer and Mouse components).

But ideally it'd be good to have a live static page showcasing this, perhaps hosted in github pages.

The question here is how to deal with both cases at the same time, i.e. you want to compose two components, one of which exclusively expects the render prop as render={...} while the other exclusively supports the render prop passed as children.

There's also the smaller issue of allowing the composed component itself to receive the render prop in either way. So you can call it like this:

<Composed
  components={[Counter, Timer]}
  render={(counter, timer) => (
    {/* ... */}
  )}
/>