Creates functional render props
Table of Contents
- Getting Started
- Other Solutions
npm install --save render-propper
RenderPropper aims to create functional render props. The example below helps break down how RenderPropper accomplishes this goal:
;/** Determines how to transform the input into a result that can be used by the renderer.* The current logic is an identity function that returns what it receives.** Assuming the string 'value' as input: 'value' would be returned to the renderer.*/;/** Determines how to render the results to output.* The current logic is again an identity function, it returns what it receives.** NOTE: Typically the renderer would return object or html that renders to the DOM,* however anything can be rendered as the output.** Again assuming the string 'value' as the result: 'value' would be returned (rendered) as output.*/;/** Generates the actual render prop using the renderer and logic.** Returns a function awaiting the input.*/;// Any value passed in will go through both logic and renderer and be returned.PassThroughvalue; // 'value'PassThrough5; // 5PassThroughfalse; // false
(More) PassThrough Examples
The basic examples below take an object in and pass the same object back.
All examples below use the same functional logic:
React PassThrough Example
The PassThrough example using React.
Generic Object PassThrough Example
The PassThrough example using an object.
All examples below utilize the same functional logic:
React SumEvenNumbers Example
Generic Object SumEvenNumbers Example
The main logic for creating render props.
The function is curried (childrenRenderProps is an example of this) and can be used to generate renderProps functions:
// Non-functional example for demonstration purposes:;;;;
In React, often my default for render props is to use the children prop (explicitly or implicitly). This is a small helper that makes creating a childrenRenderProp easier.
// Non-functional example for demonstration purposes:;;;// Explicit// Implicit
I'm not aware of any, if you are please make a pull request and add it here!
Thanks goes to these people (emoji key):
💻 🎨 📖 🤔
💬 💻 🎨 🤔
This project follows the all-contributors specification. Contributions of any kind welcome!