Resources

Show Once Code Override for Framer

View demo

Remix project

Remix project

Resources

Show Once Code Override for Framer

View demo

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Effect

Show Once Code Override for Framer

This is a code override for Framer that you can apply to any element to ensure it only shows up once per month, day, week, or hour. Feel free to remix the project and copy the code override into your project to start using it.

image of Nandi Muzsik
image of Clement Lionne

Created by

Nandi

and

Clement

Show Once Code Override for Framer
Show Once Code Override for Framer
Show Once Code Override for Framer

Related Lesson

Watch now

Related Lesson

Watch now

Related Lesson

Watch now

About The Resource

To use the code override, just copy it from below, then create the override in your project by going to the assets panel, clicking the plus button, and hitting create. Next, delete the automatically generated override and paste in the "ShowOnce" code.

Applying it to elements in Framer is easy. Just select the layer, head to the right panel, and under code overrides, click the little plus button.

When applying the code override, you can select which one you'd like to use—either show once per hour, day, week, or month.

About The Resource

To use the code override, just copy it from below, then create the override in your project by going to the assets panel, clicking the plus button, and hitting create. Next, delete the automatically generated override and paste in the "ShowOnce" code.

Applying it to elements in Framer is easy. Just select the layer, head to the right panel, and under code overrides, click the little plus button.

When applying the code override, you can select which one you'd like to use—either show once per hour, day, week, or month.

About The Resource

To use the code override, just copy it from below, then create the override in your project by going to the assets panel, clicking the plus button, and hitting create. Next, delete the automatically generated override and paste in the "ShowOnce" code.

Applying it to elements in Framer is easy. Just select the layer, head to the right panel, and under code overrides, click the little plus button.

When applying the code override, you can select which one you'd like to use—either show once per hour, day, week, or month.

show once override

Show once override customizablity.

show once override

Show once override customizablity.

show once override

Show once override customizablity.

Show Once code override

Feel free to copy the code for the override from below, create the override file in your project, and paste this code there.

Show Once code override

Feel free to copy the code for the override from below, create the override file in your project, and paste this code there.

Show Once code override

Feel free to copy the code for the override from below, create the override file in your project, and paste this code there.

import type { ComponentType } from "react"
import { useState, useRef, useEffect } from "react"
import { useCookies } from "react-cookie"
import { useInView } from "framer-motion"

function showOnce(Component, expiryHours): ComponentType {
    return (props: any) => {
        const COOKIE_NAME = `preload_${props.id}`
        const ref = useRef(null)
        const isInView = useInView(ref)
        const [cookies, setCookie] = useCookies([COOKIE_NAME])
        const [hasVisited, setHasVisited] = useState(false)

        useEffect(() => {
            setHasVisited(cookies[COOKIE_NAME] || false)
        }, [])
        useEffect(() => {
            if (isInView) {
                setCookie(COOKIE_NAME, true, {
                    expires: getExpirationDate(expiryHours),
                })
            }
        }, [isInView])

        // Apply all props directly to Component to preserve external styling and sizing
        return !hasVisited ? <Component {...props} ref={ref} /> : null
    }
}
const getExpirationDate = (hours) => {
    const expirationDate = new Date()
    expirationDate.setTime(expirationDate.getTime() + hours * 60 * 60 * 1000)
    return expirationDate
}
export const showOncePerHour = (Component): ComponentType =>
    showOnce(Component, 1)
export const showOncePerDay = (Component): ComponentType =>
    showOnce(Component, 24)
export const showOncePerWeek = (Component): ComponentType =>
    showOnce(Component, 24 * 7)
export const showOncePerMonth = (Component): ComponentType =>
    showOnce(Component, 24 * 30)
import type { ComponentType } from "react"
import { useState, useRef, useEffect } from "react"
import { useCookies } from "react-cookie"
import { useInView } from "framer-motion"

function showOnce(Component, expiryHours): ComponentType {
    return (props: any) => {
        const COOKIE_NAME = `preload_${props.id}`
        const ref = useRef(null)
        const isInView = useInView(ref)
        const [cookies, setCookie] = useCookies([COOKIE_NAME])
        const [hasVisited, setHasVisited] = useState(false)

        useEffect(() => {
            setHasVisited(cookies[COOKIE_NAME] || false)
        }, [])
        useEffect(() => {
            if (isInView) {
                setCookie(COOKIE_NAME, true, {
                    expires: getExpirationDate(expiryHours),
                })
            }
        }, [isInView])

        // Apply all props directly to Component to preserve external styling and sizing
        return !hasVisited ? <Component {...props} ref={ref} /> : null
    }
}
const getExpirationDate = (hours) => {
    const expirationDate = new Date()
    expirationDate.setTime(expirationDate.getTime() + hours * 60 * 60 * 1000)
    return expirationDate
}
export const showOncePerHour = (Component): ComponentType =>
    showOnce(Component, 1)
export const showOncePerDay = (Component): ComponentType =>
    showOnce(Component, 24)
export const showOncePerWeek = (Component): ComponentType =>
    showOnce(Component, 24 * 7)
export const showOncePerMonth = (Component): ComponentType =>
    showOnce(Component, 24 * 30)
import type { ComponentType } from "react"
import { useState, useRef, useEffect } from "react"
import { useCookies } from "react-cookie"
import { useInView } from "framer-motion"

function showOnce(Component, expiryHours): ComponentType {
    return (props: any) => {
        const COOKIE_NAME = `preload_${props.id}`
        const ref = useRef(null)
        const isInView = useInView(ref)
        const [cookies, setCookie] = useCookies([COOKIE_NAME])
        const [hasVisited, setHasVisited] = useState(false)

        useEffect(() => {
            setHasVisited(cookies[COOKIE_NAME] || false)
        }, [])
        useEffect(() => {
            if (isInView) {
                setCookie(COOKIE_NAME, true, {
                    expires: getExpirationDate(expiryHours),
                })
            }
        }, [isInView])

        // Apply all props directly to Component to preserve external styling and sizing
        return !hasVisited ? <Component {...props} ref={ref} /> : null
    }
}
const getExpirationDate = (hours) => {
    const expirationDate = new Date()
    expirationDate.setTime(expirationDate.getTime() + hours * 60 * 60 * 1000)
    return expirationDate
}
export const showOncePerHour = (Component): ComponentType =>
    showOnce(Component, 1)
export const showOncePerDay = (Component): ComponentType =>
    showOnce(Component, 24)
export const showOncePerWeek = (Component): ComponentType =>
    showOnce(Component, 24 * 7)
export const showOncePerMonth = (Component): ComponentType =>
    showOnce(Component, 24 * 30)

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • Scramble and appear text effect on a dark background with letters floating and options to copy component or remix

    Text Scramble Appear Effect in Framer

    Effect

    Scramble and appear text effect on a dark background with letters floating and options to copy component or remix

    Text Scramble Appear Effect in Framer

    Effect

    Scramble and appear text effect on a dark background with letters floating and options to copy component or remix

    Text Scramble Appear Effect in Framer

    Effect

  • Pixel trail component with blue pixelated animation and interactive copy or remix options

    Pixel Trail Effect for Framer

    Effect

    Pixel trail component with blue pixelated animation and interactive copy or remix options

    Pixel Trail Effect for Framer

    Effect

    Pixel trail component with blue pixelated animation and interactive copy or remix options

    Pixel Trail Effect for Framer

    Effect