react-drag-to-select

A react library which adds drag to select to your app

Install

npm install --save react-drag-to-select

Usage

const App = () => {

  const handleSelectionChange = useCallback((box: Box) => {
    console.log(box);
  },[])

  const { DragSelection } = useSelectionContainer({
    onSelectionChange,
  });

  return (
    <div id='root'>
      <DragSelection/>
      <div>Selectable element</div>
    </div>
  )
}

1. Add useSelectionContainer hook to your component and pass onSelectionChange handler
2. Render <DragSelection/> somewhere in code
3. That's it! Mouse selection will appear, when you click and drag within window or element passed in eventsElement.

This library will not select your items. You have to handle selection yourself in onSelectionChange method (see example). You can use boxesIntersects(boxA, boxB) method to check if element intersetcs with selection.

useSelectionContainer arguments

Name	Required	Type	Default	Description
onSelectionStart	No	() => void		Method called when selection starts (mouse is down and moved)
onSelectionEnd	No	() => void		Method called when selection ends (mouse is up)
onSelectionChange	Yes	(box: Box) => void		Method called when selection moves
isEnabled	No	boolean	true	If false, selection does not fire
eventsElement	No	Window, HTMLElement or null	window	Element to listen mouse events
selectionProps	No	React.HTMLAttributes		Props of selection - you can pass style here as shown below

Selection styling

To style your selection, pass selectionProps: { style } prop:

  const { DragSelection } = useSelectionContainer({
    ...,
    selectionProps: {
      style: {
        border: '2px dashed purple',
        borderRadius: 4,
        backgroundColor: 'brown',
        opacity: 0.5,
      },
    },
  });

The default style is

{
  border: '1px solid #4C85D8',
  background: 'rgba(155, 193, 239, 0.4)',
  position: `absolute`,
  zIndex: 99,
}

Working with draggable elements

If you use any drag-n-drop library (like react-dnd or react-beautiful-dnd), you may want to not start selection when user starts dragging an element. To prevent this, add data-draggable=true to your element - selection won't be started if user clicks and drags this element or its children:

<div data-draggable=true>
...
</div>

Used by

• 

License

MIT © Air