Although react-moveable and css modules work well together, implementing CSS styling can be challenging

Question

Although react-moveable and css modules work well together, implementing CSS styling can be challenging

I'm currently utilizing react-moveable to incorporate drag and drop functionality for a specific component. My goal is to hide the control box until the user interacts with the target.

Initially, I attempted to apply custom CSS to the control box, but it seems to be ineffective. Despite the documentation indicating that a className can be assigned, it's not working as expected for me.

Below is a simplified version of the component structure:


import React from "react";
import Moveable from "react-moveable";

import { makeMoveable, DraggableProps, ResizableProps, RotatableProps, Rotatable, Draggable, Resizable } from "react-moveable";
import MoveableHelper from "moveable-helper";
import styles from './label.module.css';

const Label = () => {
  const [helper] = React.useState(() => {
    return new MoveableHelper();
})
const targetRef = React.useRef<HTMLDivElement>(null);
  return (
    <div className="container">
     <div>
        name
      </div>
      <Moveable
        className={styles.moveable1}
        target={targetRef}
        draggable={true}
        resizable={true}
        rotatable={true}
        origin={false}
        onDragStart={helper.onDragStart}
        onDrag={helper.onDrag}
        onResizeStart={helper.onResizeStart}
        onResize={helper.onResize}
        onRotateStart={helper.onRotateStart}
        onRotate={helper.onRotate}
      />
    </div>
  );
};

export default Label;

Here is the content of the CSS module file label.module.css:

.moveable1 .moveable-line .moveable-direction  {
    background: red !important;

}

Despite my attempts to specify the className as a string and make adjustments to the class names in the CSS files, the appearance of the control box remains unchanged. Any insights or suggestions?

Any thoughts on how to tackle this issue?

css reactjs css-modules moveabletype

Answer 1

Answer №1

The control box is determined by the zoom and renderDirection settings.

We have the option to hide it by setting zoom to 0 (default is 1).

zoom={0}

We can also customize or hide the border controls using renderDirections. (Default settings provided)

 renderDirections={["nw", "n", "ne", "w", "e", "sw", "s", "se"]}

Furthermore, you can add styles to the target div using a normal onClick function along with the useState hook.

import React from "react";
import Moveable from "react-moveable";

import { makeMoveable, DraggableProps, ResizableProps, RotatableProps, Rotatable, Draggable, Resizable } from "react-moveable";
import MoveableHelper from "moveable-helper";
import styles from './label.module.css';

const Label = () => {
  const [helper] = React.useState(() => {
    return new MoveableHelper();
})
const targetRef = React.useRef<HTMLDivElement>(null);

const [customStyles, setCustomStyles] = useState( {border: "1px solid green";} ) 

const handleStyles = e => { 
// Your style logic... 
// Update the state using setState
setCustomStyles({border: "1px solid blue"})

}
  return (
    <div className="container">
     <div onclick={handleStyles} style={customStyles}>
        name
      </div>
      <Moveable
        className={styles.moveable1}
        target={targetRef}
        draggable={true}
        resizable={true}
        rotatable={true}
        origin={false}
        onDragStart={helper.onDragStart}
        onDrag={helper.onDrag}
        onResizeStart={helper.onResizeStart}
        onResize={helper.onResize}
        onRotateStart={helper.onRotateStart}
        onRotate={helper.onRotate}

        { /** Hide the control box * /  }
        zoom={0}
        renderDirections={["nw", "n", "ne"]}
      />
    </div>
  );
};

export default Label;

Additional Resources:

Zoom Types:

Render Directions:

CSS style Box: https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-directions

👀 style={{ background: 'yellow' }}

Hope this information proves helpful. Best regards, M. 💀

Answer 2

The control box is determined by the zoom and renderDirection settings.

We have the option to hide it by setting zoom to 0 (default is 1).

zoom={0}

We can also customize or hide the border controls using renderDirections. (Default settings provided)

 renderDirections={["nw", "n", "ne", "w", "e", "sw", "s", "se"]}

Furthermore, you can add styles to the target div using a normal onClick function along with the useState hook.

import React from "react";
import Moveable from "react-moveable";

import { makeMoveable, DraggableProps, ResizableProps, RotatableProps, Rotatable, Draggable, Resizable } from "react-moveable";
import MoveableHelper from "moveable-helper";
import styles from './label.module.css';

const Label = () => {
  const [helper] = React.useState(() => {
    return new MoveableHelper();
})
const targetRef = React.useRef<HTMLDivElement>(null);

const [customStyles, setCustomStyles] = useState( {border: "1px solid green";} ) 

const handleStyles = e => { 
// Your style logic... 
// Update the state using setState
setCustomStyles({border: "1px solid blue"})

}
  return (
    <div className="container">
     <div onclick={handleStyles} style={customStyles}>
        name
      </div>
      <Moveable
        className={styles.moveable1}
        target={targetRef}
        draggable={true}
        resizable={true}
        rotatable={true}
        origin={false}
        onDragStart={helper.onDragStart}
        onDrag={helper.onDrag}
        onResizeStart={helper.onResizeStart}
        onResize={helper.onResize}
        onRotateStart={helper.onRotateStart}
        onRotate={helper.onRotate}

        { /** Hide the control box * /  }
        zoom={0}
        renderDirections={["nw", "n", "ne"]}
      />
    </div>
  );
};

export default Label;

Additional Resources:

Zoom Types:

Render Directions:

CSS style Box: https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-directions

👀 style={{ background: 'yellow' }}

Hope this information proves helpful. Best regards, M. 💀

Answer 3

Answer №2

For confirmation, have you attempted using the .moveable-control css class name like this:

.moveable-control {
    background: red !important;
}

Answer 4

For confirmation, have you attempted using the .moveable-control css class name like this:

.moveable-control {
    background: red !important;
}

Although react-moveable and css modules work well together, implementing CSS styling can be challenging

Answer №1

Answer №2

Similar questions

Ways to center Bootstrap v4 modal pop-ups vertically

Having trouble aligning page in the center with flexbox and styled components

Creating manageable CSS styles for a wide variety of themes

In a Next JS project, the CSS Transition fails to activate when a class is dynamically added

The correct way to write media queries in CSS for the iPhone

Employ the useEffect hook to make a constant post request

Prevent event propagation when clicking on an Autocomplete material UI component within an accordion section

Parallax scrolling in all directions

How can I ensure the text remains centered within a div, even when there are buttons aligned to the left or

Styling a div element in CSS so that it adjusts its size to fit its

What could be causing this massive error during the npm install process in this particular repository?

Ways to conceal CSS on the page when triggering a different element

Encountering a duplicate key error with MaterialUI React components

Incorporating external CSS stylesheets into a custom LESS framework

What causes Next.js to struggle with recognizing TypeScript code in .tsx and .ts files?

Encountering errors while working with React props in typing

When the screen is tapped, the background color transforms into a different shade

next-redux-wrapper is being invoked repeatedly and experiencing multiple calls to HYDRATE

Can you show me how to achieve a smooth background color transition for a div that takes 2 seconds to complete when it is inserted into the DOM?

Establish a background image for a particular item within a list