[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![MIT License](https://img.shields.io/npm/l/react-render-function.svg?style=flat-square)](https://github.com/shrynx/react-render-function/blob/master/LICENSE)
[![module formats: umd, cjs, and es](https://img.shields.io/badge/module%20formats-umd%2c%20cjs%2c%20es-green.svg?style=flat-square)](https://unpkg.com/react-render-function/dist/)
[![size](http://img.badgesize.io/https://unpkg.com/react-render-function/dist/umd/index.min.js?label=size&style=flat-square)](https://unpkg.com/react-render-function/dist/)
[![gzip size](http://img.badgesize.io/https://unpkg.com/react-render-function/dist/umd/index.min.js?compression=gzip&label=gzip%20size&style=flat-square)](https://unpkg.com/react-render-function/dist/)
[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
[![CircleCI](https://circleci.com/gh/shrynx/react-render-function.svg?style=svg)](https://circleci.com/gh/shrynx/react-render-function)
[![Coverage Status](https://coveralls.io/repos/github/shrynx/react-render-function/badge.svg?branch=master)](https://coveralls.io/github/shrynx/react-render-function?branch=master)

# react-render-function

> Allow using render props, Function as Child Component or component injection to render component

## Preface

> The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function

> -- https://reactjs.org/docs/render-props.html

---

> “Function as Child Component”s are components that receive a function as their child.

> -- https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9

Both `render-props` and `facc` are quite similar,

both the techniques use function in order to provide props from parent component to render a child component,

the only difference is how they provide access to the function.

### render-props

```javascript
<Parent render={props => <Child {...props} />} />
```

### Function as Child Component

```javascript
<Parent>{props => <Child {...props} />}</Parent>
```

### Component Injection

```javascript
<Parent component={Child} />
```

## Usecase

`render-props` are 🔥 in react.

Many popular libraries ([react-router](https://github.com/ReactTraining/react-router), [downshift](https://github.com/paypal/downshift), [formik](https://github.com/jaredpalmer/formik), etc...) are using it, and FaCC being the same thing is also popularly in use ([react-motion](https://github.com/chenglou/react-motion), etc...).

Even the new [react-context api](https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md) is using it.

This module helps library authors provide both `render-props` and `Function as Child Component` to their users.

## Installation

* npm

  ```sh
    npm i -D react-render-function
  ```

* yarn
  ```sh
    yarn add -D react-render-function
  ```

## Usage

`react-render-function` library exposes a single function which takes 2 arguments

* **ownProps** (simply provide `this.props` or `props` depending on the component)
* **childProps** (props that you want to pass to child component)

`ownProps` is used to determine whether a `component` prop, `render` prop or `children` is provided.

`childProps` are props passed to the child component.

return the `renderFunction` with appropriate arguments in the **render** method of your component.

The implementation of really tiny (basically 3 lines), and weighs **286B** gzipped.

**Note**

* If provided both component prop and child as function, component prop takes priority and a warning is logged (only during development)
* If provided both component prop and render prop, component prop takes priority and a warning is logged (only during development)
* If provided both render prop and child as function, render prop takes priority and a warning is logged (only during development)
* If provided all 3, component prop, render prop and child as function, component prop takes priority and a warning is logged (only during development)

## Examples

Check the [examples folder](./examples).

The main component [Counter](./examples/Counter.js) is implemented with `react-render-function`

and the subsequent components demonstrate usage of render-props and Function as Child Component.

You can also play with the example  
[![Edit render-function demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/31wm8n4wzp)