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: [email protected]

👨‍🚀 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


Watch video CSS Custom Properties that Dynamically Update with React & JavaScript online without registration, duration hours minute second in high quality. This video was added by user Colby Fayock 20 October 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 17,524 once and liked it 448 people.