API Reference

Find a detailed API reference for the components used in the application.

Components

Suspense

Render a fallback UI while the child component is loading.

Import

import { Suspense } from 'suspense-fallback-debugger';

Basic Usage

import { Suspense } from 'suspense-fallback-debugger';

export function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyChildComponent />
    </Suspense>
  );
}

Props

See React Suspense documentation for more details.

Additional Props

Name	Type	Required	Description	Default
className?*	string	false	Additional CSS classes to apply to the component.	undefined
name?	string	false	Name of the Suspense component to easily identify it in the DevTools.	undefined

* In some cases, pass the same children className to the Suspense component to maintain the same style as production. This is not necessary in most cases.

DevTools

Dropdown menu component that displays all rendered <Suspense/> components.

Import

import { DevTools } from 'suspense-fallback-debugger';

Basic Usage

import { DevTools } from 'suspense-fallback-debugger';

export function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
        <DevTools />
      </body>
    </html>
  );
}

Props

Name	Type	Required	Description	Default
children?	React.ReactNode	false	Children to render inside the dropdown menu.	undefined

Previously named DevDropdown, which is now deprecated.

SuspenseContext

Context provider for the Suspense component.

Use this to ensure a custom hook or component is rendered inside the Suspense component.

Import

import { SuspenseContext } from 'suspense-fallback-debugger';

Basic Usage

"use client";

import { SuspenseContext } from 'suspense-fallback-debugger';
import { useContext } from 'react';

export function useCustomHook() {
  const context = useContext(SuspenseContext);

  if (!context) {
    throw new Error("**useCustomHook** must be used inside a Suspense component");
  }

  const someFunctionThatNeedsSuspense = async () => {
    // ...
  };

  return {
    someFunctionThatNeedsSuspense,
  }
}

DropdownMenu (Components)

Extend your DevTools so all tools are in one place.

DropdownMenu components are based on Shadcn/ui components. See the DropdownMenu component for more information.

Import

import {
  DropdownMenuGroup,
  DropdownMenuGroupLabel,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuPortal,
} from "suspense-fallback-debugger/dropdown-menu";

Basic Usage

See Extend Your DevTools for more information.