https://github.com/madappgang/react-selections
A library for drawing interactive selections written for react applications
https://github.com/madappgang/react-selections
areas draggable draw react resizable selections
Last synced: 8 months ago
JSON representation
A library for drawing interactive selections written for react applications
- Host: GitHub
- URL: https://github.com/madappgang/react-selections
- Owner: MadAppGang
- License: mit
- Created: 2018-12-04T20:45:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T08:33:50.000Z (over 3 years ago)
- Last Synced: 2025-09-22T09:24:04.195Z (8 months ago)
- Topics: areas, draggable, draw, react, resizable, selections
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@madappgang/react-selections
- Size: 11.8 MB
- Stars: 25
- Watchers: 2
- Forks: 10
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Selections
[](https://travis-ci.org/MadAppGang/react-selections)
[](https://coveralls.io/github/MadAppGang/react-selections?branch=master)
This is a library that provides a set of tools for drawing regions with cursor.
## Installation
```bash
npm install --save @madappgang/react-selections
```
## Usage
You need to specify an area for the selections to be rendered inside of. Selections can't be drawn outside the container. The package provides a container component, which you should use to render as a parent node to your selections (and other components as well).
```javascript
import { Selection, SelectionContainer } from '@madappgang/react-selections';
```
You then simply wrap your area that you want to render selections above in the container:
```javascript
const selectionArea = {
id: 1,
dimensions: {
height: 150,
width: 300
},
coordinates: {
x: 100,
y: 100
},
};
...
...
...
...
```
As you see you can render anything inside the container, it will recognize selections inside and pass them special props.
### Interactive selections
If you need a selection to be draggable/resizable you need to specify it explicitly with an *interactive* boolean property.
```javascript
```
Then you have to provide a handler that is going to handle area updates.
```javascript
...
constructor() {
...
this.state = {
selectionArea: { ... },
};
}
...
handleSelectionAreaUpdate(selectionArea) {
this.setState({ selectionArea });
}
render() {
return (
...
);
}
...
```
...