react-drag-to-select

A react library which adds drag to select to your app

Install

npm install --save @air/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,
}

Disabling selection on elements

To prevent starting selection, add data-disableSelect to element:

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

Used by

• 

License

MIT © Air