Highlight any panel in your dashboard

today we're going to build a highlight component that can turn this into this and this question came from one of our build UI members who asked how to highlight any panel in their dashboard and I ended up with this awesome highlight component that can wrap any react component even a server component now we're going to be starting here in this dashboard component and right now it is rendering the visitors from the stats prop and we want to apply some Styles whenever this visitors prop changes so we need some new react state which will store the previous visitors

so let's see the initial value with visitors and this way when the component re-renders with new visitors we'll know if it has changed if the previous visitors don't equal the new visitors so let's call this is highlighting now we can come down here to our panel which is background gray 900 and let's just turn this class name into an expression and we'll say if is highlighting is true we'll make it background Sky 500 otherwise we'll make this background

Gray 900. and now if we save this and refresh when we first load the page we'll see the background is 900 and as soon as we change this we'll see the panel is highlighted and we can also make the text white otherwise we'll make the text sky 500. so now we have kind of our highlight treatment here but this stays highlighted but we want to turn the

Highlight off after a certain amount of milliseconds so we need to call set previous visitors here after say a second so let's create a new effect and we'll call set timeout after a second and we'll use this to set the previous visitors to the new value of visitors that's coming from the prop and we'll go ahead and drop this in the dependency array we'll grab an ID and we'll return a cleanup function that clears the timeout and check this out now we get a second

of highlighting and then it resets and uh it even works if we click it multiple times because every time this component re-renders we clear the previous timeout we rerun this effect so this is a nice restartable behavior that we get for free now this is a great start but there's kind of a lot going on here so let's go ahead and extract this into a little custom hook that we're going to call use highlight and we can just grab this all the way

down to here and move it right up into our hook and let's go ahead and parametrize this value so this will be value which is unknown we can replace it here here here and here and we'll rename our state to previous value and set previous value and our hook will just return is highlighting so now we can come down here where we

want to use our hook and just say let is highlighting equals use highlight for the visitors and now if we give this a refresh we have a nice clean initial render and we still have our highlight Behavior we can even add some transitions here to make it animated so pretty cool we can start to see how flexible this is and maybe instead of hard coding this a

thousand we also want our color to be able to pass this in so maybe we only want half a second highlight let's go ahead and add a duration prop which is a number and we can use this in our timeout and we'll also add this to the dependency array so now we can get an easy half a second highlight or a 1500 millisecond highlight and we can reuse this hook wherever we need to in our app so pretty neat so this is pretty cool we have our little use highlight hook which is