react-drag-to-select v1.0.3-rc01

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

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