Skip to main content

​
Overview

The ClientProvider component is a client-side wrapper that provides toast notification functionality throughout the VisionaryAI application using react-hot-toast.

​
Location

components/ClientProvider.tsx

​
Component signature

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
})

​
Props

​
children
React.ReactNode
required
Child components to be wrapped with the toast notification provider

​
Features

​
Toast notifications

  • Provides global toast notification context via react-hot-toast
  • Displays notifications at the bottom-center of the screen
  • Used for success/error messages during image generation

​
Client-side rendering

  • Marked with "use client" directive for Next.js 13 App Router
  • Ensures toast functionality works in the client-side React context

​
Usage

The component is used in the root layout to wrap the entire application: 
import ClientProvider from "../components/ClientProvider";

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

​
Implementation details

"use client"
import{ Toaster } from "react-hot-toast"

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <>
            <Toaster position="bottom-center"/>
            {children}        
        </>
    )
}

​
Toast configuration

​
position
string
default:"bottom-center"
Position of toast notifications on the screen

​
Dependencies

  • react-hot-toast: Toast notification library

PromptInput

Uses toast notifications to display generation status

Header

Application header component

Build docs developers (and LLMs) love

Get started for freeTalk to us