React JSX - Setting a dynamic :hover color pseudoclass property

user_16441693 0
Viewed 664

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!

jsx reactjs pseudo-class css javascript
1 Answers

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.)

user_8631100
Related