CSS Custom Properties that Dynamically Update with React & JavaScript

Learn how to create CSS Variables (Custom Properties) and dynamically update them in a React application. We'll walk through spinning up a new React app, creating custom properties for existing styles, and updating those properties based on interactions.

🧐 What's Inside

00:00 - Intro to CSS Custom Properties
00:15 - CSS Custom Properties Overview
01:20 - Creating a new React application with Create React App
02:27 - Adding a Custom Variable or Custom Property to change the React logo color
05:49 - Getting the value of a CSS Custom Property with JavaScript
07:30 - Setting the value of a CSS Custom Property with JavaScript
08:57 - Dynamically resizing the React logo with a CSS Custom Property
12:04 - Speeding up a CSS animation by updating a CSS Custom Property
16:04 - Outro

🗒️ Read More
https://spacejelly.dev/posts/how-to-c...

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...

🐦 Get updates straight to your Twitter @colbyfayock
  / colbyfayock  

📸 Catch the next stream live on Twitch @colbyfayock
  / colbyfayock  

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: hello@colbyfayock.com

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses

🧰 More Resources

Custom properties (--*): CSS variables
https://developer.mozilla.org/en-US/d...

Using CSS custom properties (variables)
https://developer.mozilla.org/en-US/d...

Create React App
https://reactjs.org/docs/create-a-new...

🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/simon-folwar/neo...
License code: JCDJYDXDJ4HEA2B9

#colbyfayock #css #react #webdevelopment