https://github.com/rwu823/react-selection

:white_large_square: Like the normal OS selection
https://github.com/rwu823/react-selection

react selection

Last synced: 8 months ago
JSON representation

:white_large_square: Like the normal OS selection

• Host: GitHub
• URL: https://github.com/rwu823/react-selection
• Owner: rwu823
• Created: 2016-05-06T09:37:52.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T14:34:21.000Z (about 2 years ago)
• Last Synced: 2025-04-03T06:12:59.279Z (9 months ago)
• Topics: react, selection
• Language: JavaScript
• Homepage: https://rwu823.github.io/react-selection/demo
• Size: 404 KB
• Stars: 95
• Watchers: 5
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome_frontend_development_resources - react-selection - Like the normal OS selection. (React / React Components)
• awesome - react-selection - Like the normal OS selection. (React / React Components)

README

          
[![version](https://img.shields.io/npm/v/react-selection.svg?label=version)](https://www.npmjs.org/package/react-selection) [![Build Status](https://img.shields.io/travis/rwu823/react-selection.svg?branch=master)](https://travis-ci.org/rwu823/react-selection) [![Coverage](https://img.shields.io/coveralls/rwu823/react-selection.svg)](https://coveralls.io/github/rwu823/react-selection)

# React Selection

Like the normal OS selection, it builds in algorithm for detect two rectangles are overlap, so the performance is pretty fast.

## Live Demo

https://rwu823.github.io/react-selection/demo

![](https://raw.githubusercontent.com/rwu823/react-selection/master/assets/screen-demo.gif)

## Usage

```html

```

```javascript

import Selection from 'react-selection'

afterSelect = (selectedTargets)=>{

  const hasSelected = selectedTargets.length

}

render() {  

  

    


      


React

        


          
redux

          
react-redux

          
react-router

          
redux-thunk

          
redux-logger

          
redux-saga

        

      

    

  

}

```


## API

## Props

```javascript

static propTypes = {

  target: PropTypes.string.isRequired,

  selectedClass: PropTypes.string,

  afterSelect: PropTypes.func,

  isLimit: PropTypes.bool,

}

static defaultProps = {

  target: '.react-selection-target',

  selectedClass: 'react-selection-selected',

  isLimit: false,

  afterSelect() {

  }

}

```

| name          | description                              |

| ------------- | ---------------------------------------- |

| target        | [String] required,  it should be a `css select` |

| selectedClass | [String] add selected class              |

| isLimit       | [Boolean] limit select range inside box  |

| afterSelect   | Function([selectedTargets]) be triggered after select, the select targets are native DOMList |

## Customization

If you want to custom your rectangle selection, it just overwrites `.react-selection-rectangle`  class

```css

.react-selection-rectangle {

  pointer-events: none;

  transition: opacity .4s;

  position: absolute;

  background-color: rgba(204,204,204 .2);

  border: 1px solid #ccc;

}

```