rectangle-selection
An easy to use items selection.
Installing
$ npm install rectangle-selection --save-dev
Example
import React from 'react';import { SelectionArea, Selectable } from 'rectangle-selection'; const App = () => { const items = React.useRef(Array.from(Array(10).keys())); const [selected, setSelected] = React.useState<number[]>([]); // Clear selected items on background click const onMouseDown = React.useCallback(() => { setSelected([]); }, []); const onSelection = React.useCallback((items: number[]) => { setSelected(items); }, []); const onItemMouseDown = (id: number) => (e: React.MouseEvent) => { e.stopPropagation(); setSelected([id]); }; return ( <SelectionArea onSelection={onSelection} onMouseDown={onMouseDown} style={{ width: 1000, height: 1000, background: '#eee' }} > {items.current.map(r => ( <Selectable key={r} data={r}> {innerRef => ( <div ref={innerRef} onMouseDown={onItemMouseDown(r)} style={{ width: 64, height: 64, margin: 16, background: selected.indexOf(r) !== -1 ? 'green' : 'red', }} /> )} </Selectable> ))} </SelectionArea> );};
Related
- Qusly - full-featured FTP client.