Table of Contents

• Getting Started
  • Installation
• Usage
• Examples
  • (More) PassThrough Examples
  • SumEvenNumbers Example
• Exports
  • renderProps
  • childrenRenderProps
• Inspiration
• Other Solutions
• Contributors
• LICENSE

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