{"id":19419681,"url":"https://github.com/rwu823/react-selection","last_synced_at":"2025-04-24T14:31:55.273Z","repository":{"id":8381909,"uuid":"58196990","full_name":"rwu823/react-selection","owner":"rwu823","description":":white_large_square: Like the normal OS selection","archived":false,"fork":false,"pushed_at":"2023-12-15T14:34:21.000Z","size":414,"stargazers_count":95,"open_issues_count":4,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-03T06:12:59.279Z","etag":null,"topics":["react","selection"],"latest_commit_sha":null,"homepage":"https://rwu823.github.io/react-selection/demo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rwu823.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-05-06T09:37:52.000Z","updated_at":"2025-02-16T16:40:43.000Z","dependencies_parsed_at":"2024-01-17T15:04:41.228Z","dependency_job_id":"cf4a3882-2bb7-4f81-8a3f-506dad82aa7a","html_url":"https://github.com/rwu823/react-selection","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rwu823%2Freact-selection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rwu823%2Freact-selection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rwu823%2Freact-selection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rwu823%2Freact-selection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rwu823","download_url":"https://codeload.github.com/rwu823/react-selection/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250643463,"owners_count":21464180,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","selection"],"created_at":"2024-11-10T13:18:37.764Z","updated_at":"2025-04-24T14:31:54.981Z","avatar_url":"https://github.com/rwu823.png","language":"JavaScript","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)\n\n# React Selection\n\nLike the normal OS selection, it builds in algorithm for detect two rectangles are overlap, so the performance is pretty fast.\n\n## Live Demo\n\nhttps://rwu823.github.io/react-selection/demo\n\n![](https://raw.githubusercontent.com/rwu823/react-selection/master/assets/screen-demo.gif)\n\n## Usage\n\n```html\n\u003clink href=\"/dist/react-selection.css\" rel=\"stylesheet\" /\u003e\n```\n\n```javascript\nimport Selection from 'react-selection'\n\nafterSelect = (selectedTargets)=\u003e{\n  const hasSelected = selectedTargets.length\n}\n\nrender() {  \n  \u003cSelection target=\".target\" afterSelect={this.afterSelect}\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003cspan className=\"target\"\u003eReact\u003c/span\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003cspan className=\"target\"\u003eredux\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan className=\"target\"\u003ereact-redux\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan className=\"target\"\u003ereact-router\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan className=\"target\"\u003eredux-thunk\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan className=\"target\"\u003eredux-logger\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan className=\"target\"\u003eredux-saga\u003c/span\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/Selection\u003e\n}\n```\n\n\n\n## API\n\n## Props\n\n```javascript\nstatic propTypes = {\n  target: PropTypes.string.isRequired,\n  selectedClass: PropTypes.string,\n  afterSelect: PropTypes.func,\n  isLimit: PropTypes.bool,\n}\n\nstatic defaultProps = {\n  target: '.react-selection-target',\n  selectedClass: 'react-selection-selected',\n  isLimit: false,\n  afterSelect() {\n\n  }\n}\n```\n\n\n\n| name          | description                              |\n| ------------- | ---------------------------------------- |\n| target        | [String] required,  it should be a `css select` |\n| selectedClass | [String] add selected class              |\n| isLimit       | [Boolean] limit select range inside box  |\n| afterSelect   | Function([selectedTargets]) be triggered after select, the select targets are native DOMList |\n\n\n\n## Customization\n\nIf you want to custom your rectangle selection, it just overwrites `.react-selection-rectangle`  class\n\n```css\n.react-selection-rectangle {\n  pointer-events: none;\n  transition: opacity .4s;\n  position: absolute;\n  background-color: rgba(204,204,204 .2);\n  border: 1px solid #ccc;\n}\n```\n\n","funding_links":[],"categories":["React"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frwu823%2Freact-selection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frwu823%2Freact-selection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frwu823%2Freact-selection/lists"}