CSS Custom Properties that Dynamically Update with React & JavaScript

Published: 20 October 2021
on channel: Colby Fayock
17,524
448

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


On this page of the site you can watch the video online CSS Custom Properties that Dynamically Update with React & JavaScript with a duration of hours minute second in good quality, which was uploaded by the user Colby Fayock 20 October 2021, share the link with friends and acquaintances, this video has already been watched 17,524 times on youtube and it was liked by 448 viewers. Enjoy your viewing!