Toast Notification

Back

Copy Link

Library

Pro

Toast Notification

50 Toast Notification

Not loading? Preview

Made by

@frameroverrides

override

click

Help

Override

Toast Notification

Copy

Override

Copied to Clipboard!

Instructions

FYI, #97 is an updated version of this override. I'd recommend using that one instead.

Use line 9 of the code to you change the message.

Feel free to update any of styling at the top of the code if you feel comfortable.

Note: you may see an optimization error when using this code. The error "ReferenceError: document is not defined" means that the code you are trying to run expects to use something called document, but this only exists in web browsers. Rest assured, on your live website you will not encounter any issues because document will be defined.

Code Preview

import type { ComponentType } from "react"
import { motion, useMotionValue, useTransform, useSpring } from "framer-motion"

export function FakeOverride(Component): ComponentType {
    return (props) => {
        // Create motion values for the mouse position (x and y)
        const x = useMotionValue(0.5)
        const y = useMotionValue(0.5)

        // Calculate rotation values based on the mouse position
        const rotateX = useTransform(y, [0, 1], [30, -30])
        const rotateY = useTransform(x, [0, 1], [-30, 30])

        // Apply a smooth spring animation to the rotation values
        const animatedRotateX = useSpring(rotateX, {
            stiffness: 300,
            damping: 30,
        })
        const animatedRotateY = useSpring(rotateY, {
            stiffness: 300,
            damping: 30,
        })

        // Update the motion values on mouse move
        const handleMouseMove = (event) => {
            const rect = event.currentTarget.getBoundingClientRect()
            const mouseX = event.clientX - rect.left
            const mouseY = event.clientY - rect.top

            x.set(mouseX / rect.width)
            y.set(mouseY / rect.height)
        }

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    rotateX: animatedRotateX,
                    rotateY: animatedRotateY,
                    transformOrigin: "center",
                }}
                onMouseMove={handleMouseMove}
                onMouseLeave={() => {
                    x.set(0.5)
                    y.set(0.5)
                }}
            />
        )
    }

import type { ComponentType } from "react"
import { motion, useMotionValue, useTransform, useSpring } from "framer-motion"

export function FakeOverride(Component): ComponentType {
    return (props) => {
        // Create motion values for the mouse position (x and y)
        const x = useMotionValue(0.5)
        const y = useMotionValue(0.5)

        // Calculate rotation values based on the mouse position
        const rotateX = useTransform(y, [0, 1], [30, -30])
        const rotateY = useTransform(x, [0, 1], [-30, 30])

        // Apply a smooth spring animation to the rotation values
        const animatedRotateX = useSpring(rotateX, {
            stiffness: 300,
            damping: 30,
        })
        const animatedRotateY = useSpring(rotateY, {
            stiffness: 300,
            damping: 30,
        })

        // Update the motion values on mouse move
        const handleMouseMove = (event) => {
            const rect = event.currentTarget.getBoundingClientRect()
            const mouseX = event.clientX - rect.left
            const mouseY = event.clientY - rect.top

            x.set(mouseX / rect.width)
            y.set(mouseY / rect.height)
        }

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    rotateX: animatedRotateX,
                    rotateY: animatedRotateY,
                    transformOrigin: "center",
                }}
                onMouseMove={handleMouseMove}
                onMouseLeave={() => {
                    x.set(0.5)
                    y.set(0.5)
                }}
            />
        )
    }