react-hooks-render-props

Hacky custom hook to emulate render props with Hooks API

Introduction

React Hooks API is awesome. Some of the libraries may not provide hooks API, but just render props (function as a child) API.

To use such libraries, this is to provide a hacky custom hook to emulate render props (function as a child).

This is not for production. It's only tested against a few small examples.

Install

npm install react-hooks-render-props

Usage

import React from 'react';
import { useRenderProps, wrap } from 'react-hooks-render-props';

const RandomNumber = ({ children }) => (
  <div>
    {children(Math.random())}
  </div>
);

const NumberWithRenderProps = () => (
  <RandomNumber>
    {value => <div>{value}</div>}
  </RandomNumber>
);

const NumberWithCustomHook = wrap(() => {
  const [value] = useRenderProps(RandomNumber);
  return (
    <div>{value}</div>
  );
});

const App = () => (
  <div>
    <NumberWithRenderProps />
    <NumberWithCustomHook />
  </div>
);

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:minimal

and open http://localhost:8080 in your web browser.

You can also try them in codesandbox.io: 01 02 03

Limitations

Due to its hacky implementation:

• It renders initially without any data.
• It may not detect the change of inputs to useRenderProps.
• And maybe some more.