39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
|
/**
|
||
|
|
* asAsync - a HOC for async loading components.
|
||
|
|
*
|
||
|
|
* Usage:
|
||
|
|
*
|
||
|
|
* const AsyncDialog = asAsync({
|
||
|
|
* load: () => import('Dialog').then(result => result.default),
|
||
|
|
* });
|
||
|
|
*
|
||
|
|
* React.render(domElement, <AsyncDialog asyncPlaceholder={ () => <Spinner/> } { ...dialogProps } />);
|
||
|
|
*
|
||
|
|
* Note the `asyncPlaceholder` prop will be respected when rendering the async component and it hasn't
|
||
|
|
* been loaded yet.
|
||
|
|
*/
|
||
|
|
import * as React from 'react';
|
||
|
|
export interface IAsAsyncOptions<TProps> {
|
||
|
|
/**
|
||
|
|
* Callback which returns a promise resolving an object which exports the component.
|
||
|
|
*/
|
||
|
|
load: () => Promise<React.ElementType<TProps>>;
|
||
|
|
/**
|
||
|
|
* Callback executed when async loading is complete.
|
||
|
|
*/
|
||
|
|
onLoad?: () => void;
|
||
|
|
/**
|
||
|
|
* Callback when async loading fails.
|
||
|
|
*/
|
||
|
|
onError?: (error: Error) => void;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Produces a component which internally loads the target component before first mount.
|
||
|
|
* The component passes all props through to the loaded component.
|
||
|
|
*
|
||
|
|
* This overload accepts a module with a default export for the component.
|
||
|
|
*/
|
||
|
|
export declare function asAsync<TProps extends {}>(options: IAsAsyncOptions<TProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<TProps & {
|
||
|
|
asyncPlaceholder?: React.ElementType<any> | undefined;
|
||
|
|
}> & React.RefAttributes<React.ElementType<TProps>>>;
|