Update the CSS module in React dynamically

Question

Update the CSS module in React dynamically

I have a canvas within my Component

When the cursor enters the Canvas, I want it to change to the crosshair style.

import styles from '../css/basic-styles.module.css';

const ImagePreview = () =>{
    [mode,setMode] = useState(0);
    changeMode(mode){
       setMode(mode);
    }
    return (){
        <canvas className={styles.canvas} width=200 height=200></canvas>
    }
}

As for the CSS:

canvas:hover{
  /*cursor:pointer;*/
  cursor:crosshair;
}

Now, I need to dynamically change the CSS based on the value of mode.

If mode is 1, I want to use the pointer cursor style.

Should I just modify the css? or is there another method to achieve this?

css reactjs

Answer 1

Answer №1

Check out the solution provided below. You can also find it in the sandbox.. Please disregard the vanilla react solution included for the snippet runner. Simply click on Run Code Snippet to preview it here.

/* Solution

const ImagePreview = () => {
  const [mode, setMode] = useState(0);
  return (
    <canvas
      onMouseEnter={() => setMode(1)}
      onMouseLeave={() => setMode(0)}
      style={{
        backgroundColor: "teal",
        cursor: mode ? "crosshair" : "pointer"
      }}
      width={200}
      height={200}
    />
  );
};

*/

// This is so it can work in Stackoverflow snippet preview. //
const ImagePreview = () => {
  const [mode, setMode] = React.useState(0);
  const canvasCfg = {
    onMouseEnter: () => setMode(1),
    onMouseLeave: () => setMode(0),
     style: { backgroundColor: "teal", cursor: mode ? "crosshair" : "pointer"},
     width: 200,
     height: 200
  }
  return React.createElement('canvas', canvasCfg)
}

const domContainer = document.querySelector('#app');
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(ImagePreview));

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

Check out the solution provided below. You can also find it in the sandbox.. Please disregard the vanilla react solution included for the snippet runner. Simply click on Run Code Snippet to preview it here.

/* Solution

const ImagePreview = () => {
  const [mode, setMode] = useState(0);
  return (
    <canvas
      onMouseEnter={() => setMode(1)}
      onMouseLeave={() => setMode(0)}
      style={{
        backgroundColor: "teal",
        cursor: mode ? "crosshair" : "pointer"
      }}
      width={200}
      height={200}
    />
  );
};

*/

// This is so it can work in Stackoverflow snippet preview. //
const ImagePreview = () => {
  const [mode, setMode] = React.useState(0);
  const canvasCfg = {
    onMouseEnter: () => setMode(1),
    onMouseLeave: () => setMode(0),
     style: { backgroundColor: "teal", cursor: mode ? "crosshair" : "pointer"},
     width: 200,
     height: 200
  }
  return React.createElement('canvas', canvasCfg)
}

const domContainer = document.querySelector('#app');
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(ImagePreview));

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 3

Answer №2

Generate a pair of classes in the following manner

.hover-effect-1:hover{
    cursor:pointer;
}


.hover-effect-2:hover{
    cursor:crosshair;
}

and implement them conditionally depending on the mode like this

import styles from '../css/basic-styles.module.css';

const ImagePreview = () =>{
    [mode,setMode] = useState(0);
    changeMode(mode){
       setMode(mode);
    }
    return (){
        <canvas className={mode == 1 ? styles.hover-effect-1 : styles.hover-effect-2} width=200 height=200></canvas>
    }
}

You can utilize these classes without :hover as well, since the cursor property will produce the intended outcome

.hover-effect-1{
    cursor: pointer;
}
.hover-effect-2{
    cursor: crosshair;
}

Answer 4

Generate a pair of classes in the following manner

.hover-effect-1:hover{
    cursor:pointer;
}


.hover-effect-2:hover{
    cursor:crosshair;
}

and implement them conditionally depending on the mode like this

import styles from '../css/basic-styles.module.css';

const ImagePreview = () =>{
    [mode,setMode] = useState(0);
    changeMode(mode){
       setMode(mode);
    }
    return (){
        <canvas className={mode == 1 ? styles.hover-effect-1 : styles.hover-effect-2} width=200 height=200></canvas>
    }
}

You can utilize these classes without :hover as well, since the cursor property will produce the intended outcome

.hover-effect-1{
    cursor: pointer;
}
.hover-effect-2{
    cursor: crosshair;
}

Update the CSS module in React dynamically

Answer №1

Answer №2

Similar questions

The files _buildmanifest.js and _ssgmanifest.js could not be loaded. The server returned a 404 error, indicating that the resources were not found

What is the best way to pass method props using links in next.js?

Postback does not reload all controls in the NameValueCollection

Prop in a React component is undergoing mutation

svg viewbox cannot be adjusted in size

Is there a way to display various data with an onClick event without overwriting the existing render?

The system could not identify 'react-scripts' as a valid command, either internal or external, and the JSON file has been deleted

How to center content vertically in a Bootstrap 5 column div

The issue of focus being lost with HOC and Formik

Updating Button Text Upon Click

Changing the size of a responsive navigation bar with React and adjusting it based on the window.scrollY position switches between collapsed and un

Issues with the Bootstrap navbar toggle functionality

React State incrementing halted at 29

What are the benefits of using default ES module properties for exporting/importing compared to named module properties?

The Redux state fails to update despite there being no difference between the old and new states

Determine the number of items (within an array) that were created within the past few days, weeks, and months leading up to the 'current time'

Experiencing difficulties in sending a post request to my express API

The Execution of a Function Fails When Passed to a Functional Component

The data fetched from an API response does not get displayed by React

I am experiencing some layout problems with Joomla K2