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); 
      })}
    />
  );
}