Toast

How to Use the Toast Override in Framer

This guide will demonstrate how to use the custom Toast Override in Framer to create toast notifications. This implementation relies on React hooks and Framer's store module to manage the state of the toast messages. Additionally, we will cover integration with design components created in Framer.

Prerequisites

Before using these overrides, ensure you have a basic understanding of React and Framer. For additional insights, refer to the Framer documentation on Overrides.

Overview

The documentation explains how to:

1. Setup the Toast Store: Initialize the store to manage the toast state.

2. Trigger the Toast: Use an override to trigger the toast when the attached component is clicked.

3. Display the Toast: Use overrides to display the toast title and message when the toast is active.

4. Integrate with Design Components: Use the toast functionality with design components created in Framer.

Step 1: Setting Up the Toast Store

First, you need to create a store to handle the toast state. This is done using Framer's createStore method. Open the code oeverride and look for the following code. the defaultData.title & defaultData.message object can be updated in order to customise the output of the toast notification.

see: Update title & message dynamically.

import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0";

// Define default toast data
const defaultData = {
    show: false,
    title: "Testing",
    message: "My Message",
};

// Create the store
export const useToast = createStore({
    toast: {
        ...defaultData,
    },
});

Step 2: Creating the Toast Trigger

To create a toast trigger that shows the toast notification upon clicking a component, use the toastTrigger override on your desired component.

import type { ComponentType } from "react";
import React from "react";
import { useToast } from "./path-to-your-toast-store-file";

export function toastTrigger(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useToast();
        let timeoutId;
        const trigger = () => {
            clearTimeout(timeoutId);
            setStore({
                toast: {
                    ...defaultData,
                    show: true,
                },
            });
            timeoutId = setTimeout(() => {
                // Hide the toast after 3 seconds
                setStore({
                    toast: {
                        ...defaultData,
                    },
                });
            }, 3000); // 3000 milliseconds = 3 seconds
        };
        return <Component {...props} onClick={trigger} />;
    };
}

Step 3: Displaying the Toast

You can use the following overrides to display the toast notification, its title, and its message.

withToast

The withToast override shows the toast notification. You can customize the animation and style within this override.

export function withToast(Component): ComponentType {
    return (props) => {
        const [store] = useToast();

        return store.toast.show ? (
            <Component
                {...props}
                role="alert"
                style={{ zIndex: 99 }}
                initial={{ y: 100 }}
                animate={{ y: 0 }}
                transition={{
                    type: "spring",
                    stiffness: 260,
                    damping: 20,
                }}
            />
        ) : null;
    };
}

withToastTitle

The withToastTitle override displays the toast title.

export function withToastTitle(Component): ComponentType {
    return (props) => {
        const [store] = useToast();
        
        return <Component {...props} text={store.toast.title} />;
    };
}

withToastMessage

The withToastMessage override displays the toast message.

export function withToastMessage(Component): ComponentType {
    return (props) => {
        const [store] = useToast();
        
        return <Component {...props} text={store.toast.message} />;
    };
}

Step 5: Using with Design Components in Framer

To integrate the toast functionality with design components created in Framer, follow these steps:

1. Create Your Design Components: Design your components visually in Framer. These can be buttons, text elements, or any UI elements you want to attach toast functionality to.

2. Apply the Overrides:

   • Triggering the Toast: Attach the toastTrigger override to the interactive component (e.g., a button).

   • Displaying the Toast: Use the withToast, withToastTitle, and withToastMessage overrides on the toast display components.