rwu823 / React Selection
⬜️ Like the normal OS selection
Stars: ✭ 93
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Selection
Dragselectrecyclerview
TouchListener that can be attached to any RecyclerView and handles multi selection for you
Stars: ✭ 371 (+298.92%)
Mutual labels: selection
Selecto
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.
Stars: ✭ 822 (+783.87%)
Mutual labels: selection
trueChart-Menubar4Sense
MENUBAR as visualization extension for Qlik Sense® allows for vertical and horizontal buttons and selections (fields, master dimensions and variables) as well as unlimited trigger based Actions. #trueChart #menubar #highcoordination
Stars: ✭ 19 (-79.57%)
Mutual labels: selection
Rsselectionmenu
An elegant selection list or dropdown menu for iOS with single or multiple selections.
Stars: ✭ 271 (+191.4%)
Mutual labels: selection
Web Highlighter
✨ A no-runtime dependency lib for text highlighting & persistence on any website ✨🖍️
Stars: ✭ 373 (+301.08%)
Mutual labels: selection
Extended text
A powerful extended official text for Flutter, which supports Speical Text(Image,@somebody), Custom Background, Custom overFlow, Text Selection.
Stars: ✭ 345 (+270.97%)
Mutual labels: selection
Share This
Medium-like text selection sharing without dependencies
Stars: ✭ 787 (+746.24%)
Mutual labels: selection
Sux4J
Sux4J is an effort to bring succinct data structures to Java.
Stars: ✭ 119 (+27.96%)
Mutual labels: selection
Selectpage
A simple style and powerful selector, including ajax remote data, autocomplete, pagination, tags, i18n and keyboard navigation features
Stars: ✭ 679 (+630.11%)
Mutual labels: selection
web-marker
a web page highlighter - Please star if you like this project
Stars: ✭ 51 (-45.16%)
Mutual labels: selection
Neataptic
🚀 Blazing fast neuro-evolution & backpropagation for the browser and Node.js
Stars: ✭ 1,027 (+1004.3%)
Mutual labels: selection
Selectable
Touch enabled selectable plugin inspired by the jQuery UI widget.
Stars: ✭ 131 (+40.86%)
Mutual labels: selection
Marklib
A small library to wrap serializable TextSelections.
Stars: ✭ 375 (+303.23%)
Mutual labels: selection
Bubble Picker
An easy-to-use animation which can be used for content picking for Android
Stars: ✭ 1,316 (+1315.05%)
Mutual labels: selection
Insert Text At Cursor
Fast crossbrowser insertion of text at cursor position in a textarea / input
Stars: ✭ 49 (-47.31%)
Mutual labels: selection
Notie
🔔 a clean and simple notification, input, and selection suite for javascript, with no dependencies
Stars: ✭ 6,170 (+6534.41%)
Mutual labels: 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
Usage
<link href="/dist/react-selection.css" rel="stylesheet" />
import Selection from 'react-selection'
afterSelect = (selectedTargets)=>{
const hasSelected = selectedTargets.length
}
render() {
<Selection target=".target" afterSelect={this.afterSelect}>
<ul>
<li><span className="target">React</span>
<ul>
<li><span className="target">redux</span></li>
<li><span className="target">react-redux</span></li>
<li><span className="target">react-router</span></li>
<li><span className="target">redux-thunk</span></li>
<li><span className="target">redux-logger</span></li>
<li><span className="target">redux-saga</span></li>
</ul>
</li>
</ul>
</Selection>
}
API
Props
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
.react-selection-rectangle {
pointer-events: none;
transition: opacity .4s;
position: absolute;
background-color: rgba(204,204,204 .2);
border: 1px solid #ccc;
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].