react-moveable and css modules - cant apply css styling

I'm using react-moveable to have drag and drop support for some component. I'm trying to make the control box disappear until the user clicks on the target.

So first, I want to apply some CSS to the control box, but I can't seem to do it. The docs specify that a className could be set, but it doesn't work for me for some reason.

The component looks something like this:


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;

And the css module file label.module.css:

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

}

I tried to set the className as string, play around with the class names in the css files and more, but nothing changes the control box style.

Any ideas?

Solution

The control box is defined by the zoom and the renderDirection

We can make it disappear (zoom default is 1 )

zoom={0}

and modify / hide the border controls. (Default)

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

And then you can apply some styles to the target div with a normal onClick function and 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 [styles, setStyles] = useState( {border: "1px solid green";} ) 

const handleStyles = e => { 
// Your styles... 
// Your setState Hook
setStyles({border: "1px solid blue"})

}
  return (
    <div className="container">
     <div onclick={handleStyles} style={styles}>
        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;

Docs:

Zoom Types: https://daybrush.com/moveable/release/latest/doc/Moveable.html#zoom

Render Directions: https://daybrush.com/moveable/release/latest/doc/Moveable.html#.RenderDirections

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

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

Hope you find this useful. Regards, M. 💀