https://github.com/xnerhu/rectangle-selection

Rectangle selection for React
https://github.com/xnerhu/rectangle-selection

Last synced: about 2 months ago
JSON representation

Rectangle selection for React

• Host: GitHub
• URL: https://github.com/xnerhu/rectangle-selection
• Owner: xnerhu
• License: mit
• Created: 2019-08-09T13:05:03.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-06T12:12:02.000Z (over 1 year ago)
• Last Synced: 2024-10-11T23:41:47.882Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 835 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rectangle-selection

[![NPM](https://img.shields.io/npm/v/rectangle-selection.svg?style=flat-square)](https://www.npmjs.com/package/rectangle-selection)

An easy to use items selection.

![](https://qusly.app/public/screenshots/rectangle-selection.gif)

## Installing

```bash

$ npm install rectangle-selection --save-dev

```

## Example

```tsx

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([]);

  // 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 (

    

      {items.current.map(r => (

        

          {innerRef => (

            


          )}

        

      ))}

    

  );

};

```


# Related

- [Qusly](https://www.github.com/qusly/qusly) - full-featured FTP client.