@shopify/react-async
Version:
Tools for creating powerful, asynchronously-loaded React components.
31 lines (30 loc) • 1.93 kB
TypeScript
import { ReactNode, ComponentType } from 'react';
import { ResolverOptions, DeferTiming } from '@shopify/async';
import { AsyncComponentType } from './types';
interface Options<Props extends object, PreloadOptions extends object = {}, PrefetchOptions extends object = {}, KeepFreshOptions extends object = {}> extends ResolverOptions<ComponentType<Props>> {
defer?: DeferTiming | ((props: Props) => boolean);
deferHydration?: DeferTiming | ((props: Props) => boolean);
displayName?: string;
renderLoading?(props: Props): ReactNode;
renderError?(error: Error): ReactNode;
/**
* Custom logic to use for the usePreload hook of the new, async
* component. Because this logic will be used as part of a generated
* custom hook, it must follow the rules of hooks.
*/
usePreload?(props: PreloadOptions): () => void;
/**
* Custom logic to use for the usePrefetch hook of the new, async
* component. Because this logic will be used as part of a generated
* custom hook, it must follow the rules of hooks.
*/
usePrefetch?(props: PrefetchOptions): () => void;
/**
* Custom logic to use for the useKeepFresh hook of the new, async
* component. Because this logic will be used as part of a generated
* custom hook, it must follow the rules of hooks.
*/
useKeepFresh?(props: KeepFreshOptions): () => void;
}
export declare function createAsyncComponent<Props extends object, PreloadOptions extends object = {}, PrefetchOptions extends object = {}, KeepFreshOptions extends object = {}>({ id, load, defer, deferHydration, displayName, renderLoading, renderError, usePreload: useCustomPreload, usePrefetch: useCustomPrefetch, useKeepFresh: useCustomKeepFresh, }: Options<Props, PreloadOptions, PrefetchOptions, KeepFreshOptions>): AsyncComponentType<ComponentType<Props>, Props, PreloadOptions, PrefetchOptions, KeepFreshOptions>;
export {};