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.