react-async-render-props v1.2.0

React Async Render Props

It is a component to build children by resolving a promise with Render Props pattern.

Usage

import AsyncRender, { type ActionType, useActionHandler } from 'react-async-render-props'

function Foo() {
    const actionRef = useActionHandler()
    return (
        <>
            <Button onClick={() => {
                actionRef.current!.runAsync()
            }}>fetch</Button>
            <AsyncRender id='fooId' actionRef={actionRef} request={() => {
                return new Promise<SelectOption[]>(resolve => {
                    setTimeout(() => {
                        resolve([
                            {
                                label: Math.random().toString(36),
                                value: 'xxx'
                            },
                        ])
                    }, 500);
                })
            }}>
                {
                    ({ loading, data, runAsync }) => {
                        return (
                            <Spin spinning={loading}>
                                <Button onClick={() => {
                                    runAsync()
                                }}>fetch</Button>
                                <ProFormSelect options={data}/>
                            </Spin>
                        )
                    }
                }
            </AsyncRender>
        </>
    )
}

export default function App() {
    return (
        <div>
            <div onClick={() => {
                AsyncRender.getHandler('fooId').runAsync()
            }}>clickme</div>
            <Foo />
        </div>
    )
}

API

type ActionType<T = any, P extends any[] = any> = ReturnType<typeof useRequest<T, P>> & {
  setParam: (partialParam: any, index?: number) => void
}

License

MIT