How to create a functional push notification (that fires after x amount of time) component with framer x?

Question

I am trying to create a push notification in framer x (react based).

It should work something like this:

customer opens mockup > timer in background starts > timer reaches five and fires event > event triggers push frame > push frame is visible on screen.

I've been playing around for a while now and I just can't figure it out...

in my last attempt I tried to solve it by changing the opacity, but I still can't update the return statement...


import * as React from "react"
import { Frame } from "framer"

export function DraggingA() {
    let counter = 0

    const style = {
        opacity: 0,
    }
    const modalComponentNew = (
        <Frame
            drag={true}
            dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
            dragElastic={1}
            size={150}
            radius={25}
            background={"#06F"}
            center={true}
            opacity={style.opacity}
        />
    )

    let x = setInterval(function() {
        if (counter < 5) {
            counter++
            console.log(counter)
        }

        if (counter >= 5) {
            clearInterval(x)

            style.opacity = 1

            console.log("counter stops")
            return modalComponentNew
        }
    }, 1000)

    return modalComponentNew
}

If you want your component to re-render by itself you will have to convert it to a statefull component or use a hook. — Treycos, Aug 01 '19 at 13:53

Treycos · Accepted Answer · 2019-08-01T14:02:43.080

If you want your component to re-render, you will have to either convert it to a statefull component and call setState after the countdown is done or use a hook.

Here is the new hook syntax :

import React, { useState } from 'react';

export function DraggingA() {
    let counter = 0

    const [opacity, setOpacity] = useState(0); //Create a hook, with 0 as a default value

    const modalComponentNew = (
        <Frame
            drag={true}
            dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
            dragElastic={1}
            size={150}
            radius={25}
            background={"#06F"}
            center={true}
            opacity={opacity} //Gets the hook value
        />
    )

    let x = setInterval(() => { //Arrow function to keep the context
        if (counter < 5) {
            counter++
            console.log(counter)
        }

        if (counter >= 5) {
            clearInterval(x)

            setOpacity(1) //Sets your hook value and re-render your component

            console.log("counter stops")
        }
    }, 1000)

    return modalComponentNew
}

Works like a charm. Thank you! I am pretty new to react, so I was trying to avoid hooks. But it looks quite easy in your snippet. — Tom, Aug 01 '19 at 14:18
Glad it helped. Well i'm fairly new to hooks too, `useState` is actually easy to use but `useEffect` feels a little more complicated than the class alternative. Anyway, if you think your problem is solved you can mark the answer as accepted to close the issue — Treycos, Aug 01 '19 at 14:38

How to create a functional push notification (that fires after x amount of time) component with framer x?

1 Answers1