Need help with react-ds?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

aurbano
152 Stars 13 Forks MIT License 94 Commits 16 Opened issues

Description

:fire: React Drag To Select component (tiny, touch friendly, and no dependencies!)

Services available

!
?

Need anything else?

Contributors list

# 82,032
TypeScr...
robinho...
robinho...
jQuery
81 commits
# 167,936
HTML
Shell
TypeScr...
React N...
1 commit

React DS

Tiny (7KB) React Drag-to-Select component (with no dependencies! with support for touch devices!

Travis npm Coverage Status npm npm Codacy grade

react-ds gif

I wrote this library because I couldn't find any existing one to do selections without having to wrap the items in their component.

In some cases you really need an unobtrusive way to make items selectable, this will do just that.

Installation

$ npm i react-ds

Or if you prefer yarn

console
$ yarn add react-ds

Usage

import Selection from 'react-ds';

// target (ref) is the parent component (so that selects only happen when clicking and dragging on it) // elements (refs[]) is an array of refs to the components that are selectable

Props

target

Element where the selection should be applied to. This is to scope the mouse/touch event handlers and make sure that it doesn't affect your whole web app.

It must be a React

ref
, it should also exist, so you may want to check if it's already initialized before rendering the
Selection
component.

elements

Array of refs to the elements that are selectable. The

Selection
component will use this to get their location and sizes to determine whether they are within the selection area.

The should exist before rendering the

Selection
component.

onSelectionChange

Function that will be executed when the selection changes. An array of element indexes will be passed (with the same indexes as the

elements
prop).

This is where you want to update your state, to highlight them as selected for example.

onHighlightChange

While dragging,

onHighlightChange
is called only when the highlighted elements have changed.

When the mouse is released, it will be called with an empty array.

onHighlightChange Example

offset
(Optional)

This is used to calculate the coordinates of the mouse when drawing the Selection box, since the mouse events gives coordinates relative to the document, but the Selection box may have a different parent.

Essentially you need to pass the offset of the parent element where the Selection is being rendered. If it's rendered in the same component as the items to be selected then the default value will work fine.

If passing your own offset keep in mind that

getBoundingClientRect()
depends on the scroll, so you may want to do something like this:
const boundingBox = target.getBoundingClientRect();
const offset = {
  top: boundingBox.top + window.scrollY,
  left: boundingBox.left + window.scrollX,
};

style
(Optional)

If you want to override the styles for the selection area, you can either pass any styles here, or use css and declare any styles on the

.react-ds-border
class.

The styles are merged, so you can override just one property if you need (typically the

zIndex
).

The default styles are:

const style = {
  position: 'absolute',
  background: 'rgba(159, 217, 255, 0.3)',
  border: 'solid 1px rgba(123, 123, 123, 0.61)',
  zIndex: 9,
  cursor: 'crosshair',
}

ignoreTargets
(Optional)

Specify an array of CSS3 selectors for DOM targets that should be ignored when initiating a selection. i.e.

['div', 'div > p', '#someId']

This is specially useful because

react-ds
uses native browser events that bypass React's event queue, so you won't be able to
stopPropagation
as usual.

Example

This example was taken from

example/app/src/Example.js
which you can see running at https://aurbano.eu/react-ds/

import React from 'react';
import PropTypes from 'prop-types';
import Selection from 'react-ds';

export default class Example extends React.PureComponent {

constructor() { super();

this.state = {
  ref: null,
  elRefs: [],
  selectedElements: [], // track the elements that are selected
};

}

handleSelection = (indexes) => { this.setState({ selectedElements: indexes, }); };

getStyle = (index) => { if (this.state.selectedElements.indexOf(index) > -1) { // Selected state return { background: '#2185d0', borderColor: '#2185d0', color: 'white', }; } return {}; };

addElementRef = (ref) => { const elRefs = this.state.elRefs; elRefs.push(ref); this.setState({ elRefs, }); };

renderSelection() { if (!this.state.ref || !this.state.elRefs) { return null; } return ( ); }

render() { const selectableElements = [ 'one', 'another', 'hey there', 'item', 'two', 'three', 'something longer?', 'last' ]; return (

{ this.setState({ ref }); } } className='item-container'> { selectableElements.map((el, index) => (
{ el }
)) } { this.renderSelection() }
); } }

Example.PropTypes = { style: PropTypes.object, };

Contributing

Only edit the files in the

src
folder. I'll update
dist
manually before publishing new versions to npm.

To run the tests simply run

npm test
. Add tests as you see fit to the
test
folder, they must be called
{string}.test.js
.

Meta

Copyright © Alejandro U. Alvarez 2017. MIT Licensed.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.