Nth Phonetic Mnemonic

    react-hooks-render-props
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    react-hooks-render-props

    Build Status npm version bundle size

    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.

    Install

    npm i react-hooks-render-props

    DownloadsWeekly Downloads

    5

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    9.09 kB

    Total Files

    7

    Last publish

    Collaborators

    • daishi