Highlight any panel in your dashboard

Build an RSC-compatible Highlight component that can style any element when a prop changes.

🔗 LINKS

🕐 TIMESTAMPS
0:00 – Intro
0:26 – Highlighting after a change
1:25 – Resetting after a timer
2:19 – Extracting a useHighlight hook
3:57 – Extracting a Highlight component
5:22 – Using data attributes to expose state
9:02 – Final demo

[mryechkin]

Super neat! Love that data attribute pattern. I can see it being very flexible for component libraries.

[tekine]

I was literally stalking your channel for new videos and you dropped this haha

[rikudevs]

The goat. Learned a lot of useful stuff

[AliFahim]

your content is always so effective and really useful. thanks

[rockNbrain]

nice job dude! tks a lot! I will definetly look for use more data atributes!!

[ComputersAreRealCool]

How did you create multiple cursors in each of the occurances of the word "visitors" (but exclude some of them) at 2:36? Blew my mind! (Looks like youre using vim, i also use vim but didnt know about that!)

[BritainRitten]

That's neat, but then there's (apparently?) no intellisense or type safety between the `highlight` in the caller vs the Highlight component. If I change `highlight` to `highlighted` on one side vs the other, nothing will alert me of an issue.

Btw, I love your videos, they are well explained. I think the extraction of that very general single-focused wrapping component is very clean otherwise.

[ArtemMavrin]

Great video and design as always, Sam, inspire me with your lessons. Tell me, what app do you use to record video and screen?

[kevinpruett]

Masterful video as always. I’m trying to wrap my head around the refactor to being server component-compliant and what benefits that produces. Am I correct in assuming that the refactor will allow it to initially render in the DOM on load versus needing JS to load and hydrate the component if it remained a client component?

[mdrifat]

Loved the video sir. Your videos helped me a lot to learn framer motion. Will you please create a framer-motion video taking Imperative coding approach using useAnimate hook

[swarajsaxena]

loved the video, how does your naming always get converted to camel case automatically??

[faruksardar]

Just curious about which extensions you use in your VS Code, Please mention it 🔥

[BolatBolat-zh]

why did you set value type to unknown?

[oscarljimenez]

Nice video, but those 'let' instead of 'const' is killing me!

[pheisar]

Anyone feels RSCs is kinda leaky abstraction? This isnt any strong opinion or statement, but i have this feeling that with RSCs we spend a lot of time thinking about how to organize code due to the server and client boundaries instead of the domain we are tackling. I cant quite articulate why but it makes me feel uncomfortable. Thanks for video though, appreciate it as usual.

[SogMosee]

Object styles with something like chakra is better than tailwind because tailwind feels like a whole new language to learn and looks like a wall of text rather just an extension of js like react is