thank you for checking out my question!
I have a color that the customer has selected.
The color has full app context. so far every item that I wish to change the backgroundColor of will change to the { color }. This is done very simply like so:
<div className='navbar' style={{ background: color }}>
I want to perform the same thing but only change the background color on hover.
I kind of have an idea in my head about how to perform it using vanilla JS, so I'm uncertain about how to perform it within a React application. Here's what I've conjured up:
export default function RecipeList( {recipes} ) {
const hoverColorItems = document.querySelectorAll('.hoverColor');
hoverColorItems.forEach((item) => {
item.addEventListener("onFocus", function() {
item.style.backgroundColor = { color }
})
})
return (
<>
<Link className="hoverColor">Button</Link>
</>
)
}
Of course, I don't expect the forEach and querySelector onFocus to work... I'm just using it for reference to get my idea across since its much more familiar to me.
Thanks!
First, when you are using a declarative library such as React, you shouldn't communicate directly with the DOM. Instead you should declare how the DOM should look like given certain state. Later on you change the state to achieve the UI effect you want.
To change the state when the user moves in and out, you can use onMouseEnter and onMouseLeave.
The code should be something like
function App({color}) {
const [isFocused, setFocus] = useState(false);
return (
<Link
href="https://stackoverflow.com"
onMouseEnter={() => setFocus(true)}
onMouseLeave={() => setFocus(false)}
className="hoverColor"
style={{
backgroundColor: isFocused ? color : ""
}}
>
Style via React
</Link>
);
}
You can see that you tell react what do you want to do (set backgroundColor red) for a certain state (isFocused is true) so to manipulate the DOM you should call setFocus.
That said, I really recommend to use css solutions when it's possible. In this case you can easily achieve the hover / focus effect using css by using variables to pass the color from React to the css.
<Link
style={{ "--background-color": color }}
href="https://stackoverflow.com"
className="link-hover"
>
Style via Css
</Link>
.link-hover:hover {
background-color: var(--background-color);
}
Demo with both of the ways: https://codesandbox.io/s/pensive-sun-m9jv2s?file=/src/App.js
(I simulated the Link component for the demo, yours probably looks a bit different.)