@dr.pogodin/react-utils
Version:
Collection of generic ReactJS components and utils
43 lines (42 loc) • 1.86 kB
TypeScript
import { type ComponentType, type FunctionComponent, type ReactNode, type RefObject } from 'react';
import { type ChunkGroupsT } from './globalState';
/**
* Client-side only! Ensures all CSS stylesheets required for the specified
* code chunk are loaded into the document; loads the missing ones; and does
* simple reference counting to facilitate future clean-up.
* @param chunkName Chunk name.
* @param refCount
* @return Resolves once all pending stylesheets, necessary for
* the chunk, are either loaded, or failed to load.
*/
export declare function bookStyleSheets(chunkName: string, chunkGroups: ChunkGroupsT, refCount: boolean): Promise<void>;
/**
* Client-side only! Frees from the document all CSS stylesheets that are
* required by the specified chunk, and have reference counter equal to one
* (for chunks with larger reference counter values, it just decrements
* the reference counter).
* @param {string} chunkName
*/
export declare function freeStyleSheets(chunkName: string, chunkGroups: ChunkGroupsT): void;
type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
default: ComponentType<PropsT>;
};
/**
* Given an async component retrieval function `getComponent()` it creates
* a special "code split" component, which uses <Suspense> to asynchronously
* load on demand the code required by `getComponent()`.
* @param options
* @param options.chunkName
* @param {function} options.getComponent
* @param {React.Element} [options.placeholder]
* @return {React.ElementType}
*/
export default function splitComponent<ComponentPropsT extends {
children?: ReactNode;
ref?: RefObject<unknown>;
}>({ chunkName, getComponent, placeholder, }: {
chunkName: string;
getComponent: () => Promise<ComponentOrModule<ComponentPropsT>>;
placeholder?: ReactNode;
}): FunctionComponent<ComponentPropsT>;
export {};