#4 Display Dynamic Data like a Clock and Real-time Weather — Mastering Framer Code Overrides
We will learn how to use code overrides to display dynamic data in Framer. The first set of overrides that we will build focus on showing the local time and weather in Amsterdam for a portfolio. We start by building a clock component using the useEffect and useState hooks. We fetch the current time and update it every minute using the setInterval function. We also format the time and handle timezones.
Next, we fetch weather data from an external API using the fetch function. We display the temperature and the weather condition using a weather icon. We create a code override for the weather component and share the weather data through Framer's store. We also demonstrate how to update the weather icon based on the weather code.
Finally, we discuss the use of stores in Framer and create a store to store the weather data. We update the code overrides to use the store and share data between components.
Starter File: https://framer.com/projects/new?dupli...
Finished File: https://framer.com/projects/new?dupli...
Companion File: https://www.figma.com/community/file/...
0:00 - Introduction: Overview of using code overrides to display dynamic data in Framer.
2:35 - Building a clock component: Using the useEffect and useState hooks to fetch and update the current time every minute.
6:12 - Fetching weather data: Implementing fetch to retrieve weather data from an external API. Displaying temperature and weather condition using a weather icon.
10:03 - Code override for weather component: Creating a code override and sharing data through Framer's store to update the weather component.
12:15 - Utilizing stores in Framer: Creating a store to store weather data and updating code overrides to use the store for data sharing.
14:05 - Conclusion and Next Steps: Preview of upcoming video on building an override for fetching and paginating a movie list.
🌞 Try Framer for free: https://framer.com
🎉 Follow on Twitter: / framer
💎 Join Community: https://www.framer.community