Effect
Effect
Effect
Effect
Show Once Code Override for Framer
Show Once Code Override for Framer
Show Once Code Override for Framer
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.
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.
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.
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.
Creator
Creator
Creator
Creator
Clement Lionne
Clement Lionne
Clement Lionne
Clement Lionne
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.
Step / 01
Remix the project.
Step / 02
Copy the override.
Step / 03
Create the override for yourself in your project.
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)
Free Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
Free
Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
Free Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
