[NOT MAINTAINED] A hacking custom hook to emulate render props
MIT License
Hacky custom hook to emulate render props with Hooks API
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.
npm install react-hooks-render-props
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>
);
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
Due to its hacky implementation:
useRenderProps
.