Courier React In-App Toast Example

This is an example React app bootstrapped with Create React App with Typescript to demo the functionality of the @trycourier/react-toast package.

@trycourier/react-provider is a dependency that handles all the authentication and integration with the Courier backend.

The only other additional dependencies are chakra-ui and Formik which are used to quickly build the demo form that will let you quickly configure and trigger a standalone local notification.

Online Demo

Check it here

You can quickly configure and trigger a simple Toast notification on this page. To test it with your own Courier Push integration you need to quickly clone the repository and run it locally.

Running Locally

Prerequisites to run the app:

Node.js
yarn

Clone the repository and install the dependencies:

$ yarn install

Start the dev server:

$ yarn start

The app URL will open automatically in your browser.

Configuring Courier Provider

You need to pass the client key you get when installing Courier Push integration and the user id to the Courier Provider component as props to start listening for notifications and to automatically style the toast according to your Courier branding.

You can pass the client key and user id in index.tsx.

Documentation

useToast hook is used to show local standalone toast notifications while the <Toast /> component is there to show the notifications coming from the Courier servers that the Courier Provider is subscribing to.