RenderPropper
Creates functional render props
!Build Statusbuild-badgebuild !Code Coveragecoverage-badgecoverage !versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense
!PRs Welcomeprs-badgeprs !Code of Conductcoc-badgecoc
!Watch on GitHubgithub-watch-badgegithub-watch !Star on GitHubgithub-star-badgegithub-star !Tweettwitter-badgetwitter
Table of Contents
- Installation - (More) PassThrough Examples - SumEvenNumbers Example - renderProps - childrenRenderProps
Getting Started
Installation
This module is distributed via npmnpm which is bundled with nodenode and should be installed as one of your project'sdependencies
:npm install --save render-propper
Usage
RenderPropper aims to create functional render props. The example below helps break down how RenderPropper accomplishes this goal:import { renderProp } from 'render-propper';
/*
* 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.
*/
const logic = input => input;
/*
* 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.
*/
const renderer = results => results;
/*
* Generates the actual render prop using the renderer and logic.
*
* Returns a function awaiting the input.
*/
const PassThrough = renderProp(() => renderer, logic);
// Any value passed in will go through both logic and renderer and be returned.
PassThrough(value); // 'value'
PassThrough(5); // 5
PassThrough(false); // 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:
import * as R from 'ramda';
import { renderProp } from 'render-propper';
const PassThrough = renderProp(R.prop('children'), R.prop('value'));
React PassThrough Example
The PassThrough example using React.import * as React from 'react';
const component = (
<PassThrough value="value">{result => <div>{result}</div>}</PassThrough>
);
// <div>value</div>
Generic Object PassThrough Example
The PassThrough example using an object.const object = {
children: results => {
document.createElement('div');
div.innerHTML = results;
return div;
},
value: 'value'
};
PassThrough(object);
// <div>value</div>
SumEvenNumbers Example
All examples below utilize the same functional logic:import * as R from 'ramda';
import { renderProp } from 'render-propper';
const isEven = n => n % 2 === 0;
const sumEvenNumbers = R.compose(
R.sum,
R.filter(isEven),
R.prop('array')
);
const SumEven = renderProp(R.prop('children'), sumEvenNumbers);
React SumEvenNumbers Example
import * as React from 'react';
const component = (
<SumEven array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}>
{result => <div>{result}</div>}
</SumEven>
);
// <div>30</div>
Generic Object SumEvenNumbers Example
const example = {
children: results => {
document.createElement('div');
div.innerHTML = results;
return div;
},
array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
};
PassThrough(object);
// <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:
const exampleRenderProp = renderProp(R.prop('example'));
const LastNameList = exampleRenderProp(... lastNameFunction ...);
const FullNameList = exampleRenderProp(... fullNameFunction ...);
const nameMap = (name, index) => <div key={index}>{name}</div>);
<LastNameList names={... namesArray ...} example={names => names.map(nameMap)} />
<FullNameList names={... namesArray ...} example={names => names.map(nameMap)} />
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:
const LastNameList = childrenRenderProp(... lastNameFunction ...);
const FullNameList = childrenRenderProp(... fullNameFunction ...);
const nameMap = (name, index) => <div key={index}>{name}</div>);
<LastNameList names={... namesArray ...} children={names => names.map(nameMap)} /> // Explicit
<FullNameList names={... namesArray ...}>{names => names.map(nameMap)}</FullNameList> // Implicit
Inspiration
The main inspiration came from having utilizing Reactreact with the Ramda libraryramda.Other Solutions
I'm not aware of any, if you are please make a pull requestprs and add it here!Contributors
Thanks goes to these people (emoji keyemojis):|
smacpherson64
💻 🎨 📖 🤔 |
Chad Watson
💬 💻 🎨 🤔 | | :---: | :---: |
This project follows the all-contributorsall-contributors specification. Contributions of any kind welcome!