RenderPropper
Creates functional render props
Table of Contents
Getting Started
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies
:
npm install --save render-propper
Usage
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
Examples
(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.
; ; // <div>value</div>
Generic Object PassThrough Example
The PassThrough example using an object.
; PassThroughobject;// <div>value</div>
SumEvenNumbers Example
All examples below utilize the same functional logic:
;; ; ; ;
React SumEvenNumbers Example
; ; // <div>30</div>
Generic Object SumEvenNumbers Example
; PassThroughobject; // <div>30</div>
Exports
renderProps
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: ; ; ; ;
childrenRenderProps
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
Inspiration
The main inspiration came from having utilizing React with the Ramda library.
Other Solutions
I'm not aware of any, if you are please make a pull request and add it here!
Contributors
Thanks goes to these people (emoji key):
smacpherson64 💻 🎨 📖 🤔 |
Chad Watson 💬 💻 🎨 🤔 |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT