Home

Awesome

A component for React that allows selecting DOM elements by moving the mouse

npm version npm downloads npm downloads

The component is designed to visualize the selection of DOM elements by moving the cursor on the screen. We leave the implementation of further interaction with selected files to you through the callback finishSelectionCallback.

This approach makes the library multipurpose because the further interaction with selected files is always unique. In one case, you need to get the Id from Datasets and update Redux-store. Otherwise, you need to add a class to the selected elements and send a request to the server. No matter how complex your case is, you can implement it with finishSelectionCallback having an array of all selected elements.

DEMO

Example

Try it out

Installation

npm install --save react-mouse-select

Usage

import { ReactMouseSelect } from 'react-mouse-select';

function App() {
  const borderSelectionContainer = document.getElementById('portal') as HTMLElement;
  const containerRef = useRef<HTMLElement>(null);

  const itemClassName = 'mouse-select__selectable';
  
  return (
    <div className="App">
      <main className="container" ref={containerRef}>
        {[...Array(10)].map((item, idx) => {
          return (
            <div key={idx} className={itemClassName} data-id={idx}>
              Selectable block
            </div>
          )
        })}
      </main>
      <ReactMouseSelect
        containerRef={containerRef}
        portalContainer={borderSelectionContainer}
        itemClassName={itemClassName}
      />
    </div>
  );
}

export default App;

!!! PLEASE NOTE

You need to add elements with the class itemClassName to the container containerRef. See the example above.

You also need to add styles to a frame and selected elements to make the selection visible.

You can style the selecting frame with the use of frameClassName and openFrameClassName or leave it invisible. You can style elements with itemClassName and selectedItemClassName.

Css example:

.mouse-select__selectable {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: gray;
}

.mouse-select__selectable .selected {
    border: 2px solid red;
}

.mouse-select__frame {
    background: red;
    opacity: 0.5;
}

Configuration

The ReactMouseSelect component accepts a few props:

Development plans

If you want, you can help me with the development of this library.