@yamada-ui/loading
Version:
Yamada UI loading components
74 lines (71 loc) • 2.15 kB
TypeScript
import * as react from 'react';
import { ReactNode, PropsWithChildren } from 'react';
import { ThemeConfig, FC } from '@yamada-ui/core';
interface LoadingContextProps {
/**
* Function to finish loading.
*/
finish: () => void;
/**
* Function to forcefully update the loading state.
*
* Please be careful, as it will forcefully overwrite the state of the loading component.
*/
force: (state: Partial<LoadingState>) => void;
/**
* Returns a judgement on whether it is currently loading or not.
*/
isLoading: () => boolean;
/**
* Function to start loading.
*
* If you specify a `message` etc. as an argument, the loading will change accordingly.
*/
start: (options?: LoadingOptions) => void;
/**
* Function to update loading.
*
* If you specify a `message` etc. as an argument, the loading will change accordingly.
*/
update: (options: LoadingOptions) => void;
}
interface LoadingOptions {
duration?: null | number;
message?: ReactNode | undefined;
}
interface LoadingState {
duration: null | number;
loadingCount: number;
message: ReactNode | undefined;
}
interface LoadingProviderProps extends PropsWithChildren<ThemeConfig["loading"]> {
}
interface LoadingContext {
/**
* The background loading animation.
*/
background: LoadingContextProps;
/**
* The custom loading animation.
*
* This cannot be used unless a component is defined at `config/loading/custom.`
*/
custom: LoadingContextProps;
/**
* The page loading animation.
*/
page: LoadingContextProps;
/**
* The screen loading animation.
*/
screen: LoadingContextProps;
}
declare const LoadingContext: react.Context<LoadingContext>;
declare const LoadingProvider: FC<LoadingProviderProps>;
/**
* `useLoading` is a custom hook for controlling the loading of the application.
*
* @see Docs https://yamada-ui.com/hooks/use-loading
*/
declare const useLoading: () => LoadingContext;
export { type LoadingOptions, LoadingProvider, type LoadingProviderProps, useLoading };