Naboo's Podracing Misadventure
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

render-propper

1.0.2 • Public • Published

RenderPropper

Creates functional render props


Build Status Code Coverage version downloads MIT License

All Contributors PRs Welcome Code of Conduct

Watch on GitHub Star on GitHub Tweet

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:

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 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

install

npm i render-propper

Downloadsweekly downloads

4

version

1.0.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability