Courier React v8 Migration Guide

import { CourierProvider } from "@trycourier/react-provider";  import { Inbox } from "@trycourier/react-inbox";  import { useEffect, useState } from "react";  import { CourierInbox, useCourier } from "@trycourier/courier-react";   function App() {  const [courierJwt, setCourierJwt] = useState<string>();  const courier = useCourier();    const generateCourierJwt = async () => {  // Call your backend to generate a JWT  setCourierJwt(result);  };   // When the userId in the app changes,  // generate a new JWT to sign in to the Courier SDK  useEffect(() => {  generateCourierJwt();  }, [userId]);   // When courierJwt has been updated, call signIn  useEffect(() => {   // Authenticate the user with the inbox  courier.shared.signIn({ userId, jwt: courierJwt });   }, [courierJwt]);    return (  <CourierProvider  authentication={courierJwt}  clientKey={clientKey}>  <Inbox />  </CourierProvider>  <CourierInbox />  ); } 

import { Inbox } from "@trycourier/react-inbox";  import { CourierProvider } from "@trycourier/react-provider";  import { CourierInbox, CourierInboxTheme } from "@trycourier/courier-react";   function App() {  // `CourierInboxTheme` is exposed in `@trycourier/courier-react` and may provide  // helpful hints in your code editor.  const theme: CourierInboxTheme = {  // In v8, inbox theme values are nested under `inbox`  inbox: {   header: {  background: "#0f0f0f",   backgroundColor: "#0f0f0f"  },   messageList: {   container: {   background: "red",   },   },   list: {   backgroundColor: "red",   },    item: {   backgroundColor: "purple",   hoverBackgroundColor: "steelblue",   },   },    // In v8, message theme values are nested under `inbox.item`  message: {   container: {   background: "purple",   },   "&:hover": {   background: "steelblue",   },   },    // The Courier watermark is removed in v8,  // so footer theming is no longer applicable  footer: {   background: "pink",   },   };   return (  <CourierProvider>  <Inbox theme={theme} />  </CourierProvider>  <Inbox lightTheme={theme} darkTheme={theme} />  ); } 

import { Inbox } from "@trycourier/react-inbox";  import { CourierProvider } from "@trycourier/react-provider";  import { CourierInbox, CourierInboxTheme } from "@trycourier/courier-react";  import { appTheme } from "./theme";  function App() {  // In v8, the entire dark mode theme can be customized  const darkThemeVariables = {   background: "black",   };    const lightTheme: CourierInboxTheme = {   ...appTheme,   // Light mode overrides...  };    const darkTheme: CourierInboxTheme = {   ...appTheme,   // Dark mode overrides...  };    return (  <CourierProvider theme={{ colorMode: "dark", variables: darkThemeVariables }}>  <Inbox theme={darkTheme} />  </CourierProvider>   // In v8, themes can be set for both light and dark mode  // Use the `mode` prop to force the "light", "dark", or "system" color mode  <CourierInbox lightTheme={lightTheme} darkTheme={darkTheme} mode="system" />  ); } 

import { Inbox } from "@trycourier/react-inbox";  import { CourierProvider } from "@trycourier/react-provider";  import {   CourierInbox,   type CourierInboxListItemFactoryProps } from '@trycourier/courier-react';   export default function App() {  const CustomListItem = (  // In v8, the full message and its index within the inbox are available  message => (   { message, index }: CourierInboxListItemFactoryProps) => (   <pre style={{  padding: '24px',  borderBottom: '1px solid #e0e0e0',  margin: '0'  }}>  {JSON.stringify({ message }, null, 2)}  </pre>  );   return (  <CourierProvider>  <Inbox renderMessage={(props) => {   return <CustomListItem {...props} />  }} />  </CourierProvider>  <CourierInbox  renderListItem={(props: CourierInboxListItemFactoryProps) => {   return <CustomListItem {...props} />  }}  />  ); } 

import { useInbox } from "@trycourier/react-hooks";  import { useCourier } from "@trycourier/courier-react";   const MyCustomInbox = () => {  const inbox = useInbox();   const { inbox } = useCourier();    useEffect(() => {  inbox.fetchMessages();   inbox.load();   }, []);   const handleRead = (message) => (event) => {  event.preventDefault();   inbox.markMessageRead(message.messageId);   inbox.readMessage({ message });   };   const handleUnread = (message) => (event) => {  event.preventDefault();   inbox.markMessageUnread(message.messageId);   inbox.unreadMessage(message)   };   const handleArchive = (message) => (event) => {  event.preventDefault();   inbox.markMessageArchived(message.messageId);   inbox.archiveMessage(message);   };   return (  <Container>  {inbox.messages.map((message) => {  return (  <Message message={message}>  {message.read ? (  <>  <button onClick={handleUnread(message)}>Mark Unread</button>  <button onClick={handleArchive(message)}>Archive</button>  </>  ) : (  <button onClick={handleRead(message)}>Mark Read</button>  )}  </Message>  );  })}  </Container>  ) } 

import { CourierProvider } from "@trycourier/react-provider";  import { Toast } from "@trycourier/react-toast";  import { useEffect, useState } from 'react';  import { CourierToast, useCourier } from "@trycourier/courier-react";   function App() {  const [courierJwt, setCourierJwt] = useState<string>();  const courier = useCourier();    const generateCourierJwt = async () => {  // Call your backend to generate a JWT  setCourierJwt(result);  };   // When the userId in the app changes,  // generate a new JWT to sign in to the Courier SDK  useEffect(() => {  generateCourierJwt();  }, [userId]);   // When courierJwt has been updated, call signIn  useEffect(() => {   // Authenticate the user  courier.shared.signIn({ userId, jwt: courierJwt });   }, [courierJwt]);    return (  <CourierProvider  authentication={courierJwt}  clientKey={clientKey}>  <Toast />  </CourierProvider>  <CourierToast />  ); } 

import { Inbox } from "@trycourier/react-inbox";  import { CourierProvider } from "@trycourier/react-provider";  import { CourierInbox, CourierInboxTheme } from "@trycourier/courier-react";   function App() {  // `CourierToastTheme` is exposed in `@trycourier/courier-react`  // and may provide helpful hints in your code editor.  const theme: CourierToastTheme = {  // Styles applied to the top-level container (ex. z-index or position)  // In v8 these are applied with the `style` prop on <CourierToast>  root: {   top: "10px",   right: "10px",   },    // Styles for toast items' outer container  // In v8 this is configurable under `item`  toast: {}    // Styles for message contents  // In v8 these are nested as values under `item`  message: {   container: { background: "white" },   title: { color: "black" }   },    // Styles for the progress bar  // In v8 this is nested under `item.autoDismissBarColor`  progressBar: {   background: "purple"  },    item {   backgroundColor: "white",   title: {   color: "black"  },   autoDismissBarColor: "purple"  },   };   return (  <CourierProvider>  <Toast theme={theme} />  </CourierProvider>  <CourierToast  lightTheme={theme}  darkTheme={theme}  style={{ top: "10px", right: "10px" }} />  ); } 

import { Inbox } from "@trycourier/react-inbox";  import { CourierProvider } from "@trycourier/react-provider";  import { CourierToast, CourierToastTheme } from "@trycourier/courier-react";  import { appTheme } from "./theme";  function App() {  const lightTheme: CourierToastTheme = {   ...appTheme,   // Light mode overrides...  };    const darkTheme: CourierToastTheme = {   ...appTheme,   // Dark mode overrides...  };    return (  <CourierProvider>  <Toast theme={darkTheme} />  </CourierProvider>   // In v8, themes can be set for both light and dark mode  // Use the `mode` prop to force the "light", "dark", or "system" color mode  <CourierToast lightTheme={lightTheme} darkTheme={darkTheme} mode="system" />  ); } 

import { useToast } from "@trycourier/react-hooks";  import { useCourier } from "@trycourier/courier-react";   const MyCustomToast = () => {  const [toast] = useToast();   const { toast } = useCourier();    useEffect(() => {  toast({   toast.addMessage({   title: "Hello, world!",   preview: "This is a toast."  });   }, [])   return (  <CourierToast  onToastItemClick={({ message } => {  // New in v8  toast.removeMessage(message);   })}  />  ); }