Selectable items for React
Allows individual or group selection of items using the mouse. Click and drag to lasso multiple items. Forked from react-selectable
Installation
npm install react-scroll-selectable
bower install react-scroll-selectable
Usage
JavaScript ES5
var React = ;var Selectable = ; var App = React; var MyItem = React
JavaScript ES6
;; { return <Selectable onSelection=thishandleSelection> thispropsitems </Selectable> ; } { console; } { return <div className=thispropsselected ? 'selected' : ''> thispropschildren </div> ); }
Selected items receive the property selected
.
Configuration
The component accepts a few optional props:
selectboxBorderWidth
(number) The border-width of selectbox.selectboxBorderStyle
(string) The border-style of selectbox.selectboxBorderColor
(string) The border-color of selectbox.onSelection
(function) Fired after user completes selectiontolerance
(number|object) The amount of buffer to add around your<Selectable />
container, in pixels. To set custom tolerances for each border of the container, pass an object containing values fortop
,left
,bottom
, andright
, e.g.{ top: 30, left: 40, bottom: 100, right: 0 }
.component
(string) The component to render. Defaults todiv
.disabled
(boolean) disable selectable or not.autoScroll
(boolean) Auto-scrolling of parent component.scrollSpeed
(number) The speed of auto-scrolling.