How to create a Countdown timer?

Developer Support
1

I’m trying to create a Countdown timer, and was wondering how to approach the counting down part of it
Currently, I’m using dynamic values to calculate the difference in days, hours, and minutes between a queried “themeEnd” date and the present time, which is then strung together into a string
Should I (a) create a code component, (b) embed Javascript, or (c) is there a way to also re-render the time every minute within Plasmic Studio?

image.png
image.png1243×536 46 KB

2

Cleanest way is code component. Something that simply re-renders its children every second (or however frequently):

function Refresher({children}) { 
  const [i, setI] = useState(0);
  useEffect(() => {
    const int = setInterval(() => setI(i + 1), 1000);
    return () => clearInterval(int);
  })
  return children;
}
3

But if you’re really trying to avoid needing app hosting / code components, you can always hack it with by tagging your text element with a class name, and then just adding a script tag that directly queries for that element and updates its innerText.