• Version 2.2.17
  • Published
  • 2.52 MB
  • 62 dependencies
  • MIT license


npm i dumi
yarn add dumi
pnpm add dumi


📖 Documentation Generator of React Component



variable AtomRenderer

const AtomRenderer: FC<IAtomRendererProps>;

    variable DumiDemo

    const DumiDemo: FC<IDumiDemoProps>;

      variable DumiDemoGrid

      const DumiDemoGrid: FC<IDumiDemoGridProps>;

        variable DumiPage

        const DumiPage: FC<{ children: ReactNode }>;

          variable unistUtilVisit

          let unistUtilVisit: any;


            function defineConfig

            defineConfig: (config: IDumiUserConfig) => IDumiUserConfig;

              function openCodeSandbox

              openCodeSandbox: (data: IPreviewerProps, opts?: { api?: string }) => void;
              • use CodeSandbox.io

                Parameter data

                previewer opts

                Parameter opts

                the api that CodeSandbox calls when creating the demo return a open function for open demo on codesandbox.io

              function openStackBlitz

              openStackBlitz: (data: IPreviewerProps) => void;

                function useAtomAssets

                useAtomAssets: () => { components: Record<string, AtomComponentAsset> };

                  function useFullSidebarData

                  useFullSidebarData: () => Record<string, ISidebarGroup[]>;
                  • hook for get sidebar data for all nav

                  function useLocale

                  useLocale: () => ILocale;

                    function useNavData

                    useNavData: () => INavItems;
                    • hook for get nav data

                    function usePrefersColor

                    usePrefersColor: () => [
                    (val: IPrefersColorValue) => void
                    • hook for get/set prefers-color-schema, use to control color mode for theme package

                      See Also

                      • https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

                    function useRouteMeta

                    useRouteMeta: () => IRouteMeta;
                    • hook for get matched route meta

                    function useSidebarData

                    useSidebarData: () => ISidebarGroup[];
                    • hook for get sidebar data for current nav

                    function useSiteData

                    useSiteData: () => ISiteContext;

                      function useSiteSearch

                      useSiteSearch: () => {
                      keywords: string;
                      setKeywords: (val: string) => void;
                      result: ISearchResult;
                      loading: boolean;

                        function useTabMeta

                        useTabMeta: () => NonNullable<IRouteMeta['tabs']>[0]['meta'] | undefined;


                          interface IPreviewerProps

                          interface IPreviewerProps {}

                            property asset

                            asset: ExampleBlockAsset;
                            • asset metadata of current demo

                            property background

                            background?: string;
                            • background color for demo content

                            property children

                            children: ReactNode;
                            • react node of current demo

                            property compact

                            compact?: boolean;
                            • disable demo content padding

                            property debug

                            debug?: boolean;
                            • debug mark (will only render in dev by default)

                            property defaultShowCode

                            defaultShowCode?: boolean;
                            • display the source code or not by default

                            property demoUrl

                            demoUrl: string;
                            • url for render current demo in a single page

                            property description

                            description?: string;
                            • description of current demo

                            property filename

                            filename?: string;
                            • filename of current demo

                            property iframe

                            iframe?: boolean | number;
                            • use iframe to render demo

                            property title

                            title?: string;
                            • title of current demo

                            property transform

                            transform?: boolean;
                            • add transform property for handle absolute/fixed position element

                            index signature

                            [key: string]: any;

                              Type Aliases

                              type IApi

                              type IApi = IUmiApi & {
                              config: IDumiConfig & {
                              [key: string]: any;
                              userConfig: IDumiUserConfig;
                              service: IUmiApi['service'] & {
                              themeData: IThemeLoadResult;
                              atomParser: AtomAssetsParser;
                              * register a new tech stack
                              registerTechStack: (fn: () => IDumiTechStack) => void;
                              * modify original theme data
                              modifyTheme: IModify<IThemeLoadResult, null>;
                              * add content tab
                              addContentTab: (fn: () => IContentTab) => void;
                              * modify assets metadata
                              modifyAssetsMetadata: IModify<AssetsPackage, null>;
                              * get assets metadata
                              getAssetsMetadata?: () => Promise<AssetsPackage>;


                                namespace *.svg

                                module '*.svg' {}

                                  variable ReactComponent

                                  const ReactComponent: React.FunctionComponent<any>;

                                    variable src

                                    const src: string;

                                      Package Files (20)

                                      Dependencies (62)

                                      Dev Dependencies (28)

                                      Peer Dependencies (2)


                                      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/dumi.

                                      • Markdown
                                      • HTML
                                        <a href="https://www.jsdocs.io/package/dumi"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>