gnapse / render-props-compose Goto Github PK
View Code? Open in Web Editor NEWCompose several nested render props components into a single one
Compose several nested render props components into a single one
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) => (
{/* ... */}
)}
/>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.