A react library which adds drag to select to your app

Usage no npm install needed!

<script type="module">
  import reactDragToSelect from '';



A react library which adds drag to select to your app

NPM JavaScript Style Guide


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



const App = () => {

  const handleSelectionChange = useCallback((box: Box) => {

  const { DragSelection } = useSelectionContainer({

  return (
    <div id='root'>
      <div>Selectable element</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>

Used by


MIT © Air