{"id":13422043,"url":"https://github.com/andreizanik/react-mouse-select","last_synced_at":"2025-07-12T01:07:48.430Z","repository":{"id":50740249,"uuid":"519220098","full_name":"andreizanik/react-mouse-select","owner":"andreizanik","description":"A simple react library for selecting elements by moving the mouse","archived":false,"fork":false,"pushed_at":"2023-05-31T07:26:15.000Z","size":3858,"stargazers_count":51,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-02T10:51:06.066Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andreizanik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-07-29T13:12:20.000Z","updated_at":"2025-06-09T06:29:51.000Z","dependencies_parsed_at":"2024-01-25T04:47:31.885Z","dependency_job_id":"f42d0508-1971-4344-b82f-2dbd472abe0d","html_url":"https://github.com/andreizanik/react-mouse-select","commit_stats":{"total_commits":32,"total_committers":2,"mean_commits":16.0,"dds":0.03125,"last_synced_commit":"95933b1043042d54ea02093c479e7cce6f7b3c64"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/andreizanik/react-mouse-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreizanik%2Freact-mouse-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreizanik%2Freact-mouse-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreizanik%2Freact-mouse-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreizanik%2Freact-mouse-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreizanik","download_url":"https://codeload.github.com/andreizanik/react-mouse-select/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreizanik%2Freact-mouse-select/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264922866,"owners_count":23683701,"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":[],"created_at":"2024-07-30T23:00:36.021Z","updated_at":"2025-07-12T01:07:48.409Z","avatar_url":"https://github.com/andreizanik.png","language":"TypeScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Miscellaneous"],"readme":"# A component for React that allows selecting DOM elements by moving the mouse\n\n[![npm version](https://img.shields.io/npm/v/react-mouse-select?color=birgtgreen)](https://www.npmjs.com/package/react-mouse-select)\n[![npm downloads](https://img.shields.io/npm/dm/react-mouse-select)](https://www.npmjs.com/package/react-mouse-select)\n![npm downloads](https://img.shields.io/npm/l/react-mouse-select)\n\n\nThe component is designed to visualize the selection of DOM elements by moving the cursor on the screen.\nWe leave the implementation of further interaction with selected files to you through the callback `finishSelectionCallback`.\n\nThis approach makes the library multipurpose because the further interaction with selected files is always unique.\nIn one case, you need to get the Id from Datasets and update Redux-store. \nOtherwise, you need to add a class to the selected elements and send a request to the server. \nNo matter how complex your case is, you can implement it with `finishSelectionCallback` having an array of all selected elements.\n\n## DEMO \n![Example](https://andreizanik.github.io/react-mouse-select/example.gif)\n\n[Try it out](https://andreizanik.github.io/react-mouse-select)\n\n## Installation\n```\nnpm install --save react-mouse-select\n```\n\n## Usage\n```typescript jsx\nimport { ReactMouseSelect } from 'react-mouse-select';\n\nfunction App() {\n  const borderSelectionContainer = document.getElementById('portal') as HTMLElement;\n  const containerRef = useRef\u003cHTMLElement\u003e(null);\n\n  const itemClassName = 'mouse-select__selectable';\n  \n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cmain className=\"container\" ref={containerRef}\u003e\n        {[...Array(10)].map((item, idx) =\u003e {\n          return (\n            \u003cdiv key={idx} className={itemClassName} data-id={idx}\u003e\n              Selectable block\n            \u003c/div\u003e\n          )\n        })}\n      \u003c/main\u003e\n      \u003cReactMouseSelect\n        containerRef={containerRef}\n        portalContainer={borderSelectionContainer}\n        itemClassName={itemClassName}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n_**!!! PLEASE NOTE**_\n\nYou need to add elements with the class `itemClassName` to the container `containerRef`.\nSee the example above.\n\nYou also need to add styles to a frame and selected elements to make the selection visible.\n\nYou can style the selecting frame with the use of `frameClassName` and `openFrameClassName` or leave it invisible.\nYou can style elements with `itemClassName` and `selectedItemClassName`.\n\nCss example:\n```css\n.mouse-select__selectable {\n    width: 100px;\n    height: 100px;\n    margin: 10px;\n    background: gray;\n}\n\n.mouse-select__selectable .selected {\n    border: 2px solid red;\n}\n\n.mouse-select__frame {\n    background: red;\n    opacity: 0.5;\n}\n```\n\n## Configuration\n\nThe `ReactMouseSelect` component accepts a few props:\n\n* `containerRef` [required]:\u003cbr/\u003e\n  Container ref in which selecting should work\n\n\n* `portalContainer` _default = document.body_:\u003cbr/\u003e\n  Portal container in which the highlighting frame will be rendered.\n\n\n* `sensitivity` (number) _default = 10_:\u003cbr/\u003e\n  Sensitivity in pixels.\n  Selection starts working only if the cursor is shifted for the specified number of pixels\n\n\n* `tolerance` (number) _default = 0_:\u003cbr/\u003e\n  The number of pixels that must be contained in a frame for the element to be selected\n\n\n* `edgeSize` (number) _default = 100_:\u003cbr/\u003e\n  The size of the edge of the viewport.\n  The scroll starts automatically when the cursor enters the borders of this edge\n  If equal 0, scrolling will not work\n  \n\n* `onClickPreventDefault` (boolean) _default = false_:\u003cbr/\u003e\n  When the selection ends, after the onMouseUp event, the onClick event is dispatched by default\n  \u003cbr/\u003eIf = true, the event bubbling is prevented after the selection\n  \u003cbr/\u003eWith a normal click (without selection) the event happens standardly\n  \u003cbr/\u003eUseful, when there is a click handler on the container, which shouldn’t happen in case of selection\n\n\n* `itemClassName` (string) _default = 'mouse-select__selectable'_:\u003cbr/\u003e\n  The class by which it is determined which elements we can select\n\n\n* `selectedItemClassName` (string) _default = 'selected'_:\u003cbr/\u003e\n  The class that is added to the elements that come into the selecting frame\n\n\n* `frameClassName` (string) _default = 'mouse-select__frame'_:\u003cbr/\u003e\n  Highlighting frame className\n\n\n* `openFrameClassName` (string) _default = 'open'_:\u003cbr/\u003e\n  The class that is added to the highlighting frame when it is active\n\n\n* `notStartWithSelectableElements` (boolean) _default = false_:\u003cbr/\u003e\n  If true, then the selection will not start with the selected elements, but only with the space between them\n  \u003cbr/\u003eIt can be useful, if the selecting elements, aside from the selection, are involved in drag and drop\n\n\n* `saveSelectAfterFinish` (boolean) _default = false_:\u003cbr/\u003e\n  Keep selected Item ClassName on selected items after selection is complete\n\n\n* `startSelectionCallback` (function `(e: MouseEvent) =\u003e void;`):\u003cbr/\u003e\n  Callback that calls at the start of the selection (when the frame appears)\n  \n  \n* `finishSelectionCallback` (function `(items: Element[], e: MouseEvent) =\u003e void;`):\u003cbr/\u003e\n  Callback that calls at the end of the selection\n\n\n### Development plans\nIf you want, you can help me with the development of this library.\n\n* **DONE**: Add auto scroll if the cursor moves to the boundary of the browser window.\n* Support of touch events for mobile devices\n* Performance tuning by looping through the array, not of all elements but required ones\n  \u003cbr/\u003eIdea: \u003cbr/\u003e\n  We have an array of selected elements and an array of non-selected elements. \n  In case one side of the frame is increased, iterate over the array of non-selected elements and move them to the selected ones.\n  In case two sides of the frame are reduced, iterate over the array of selected elements and move them to the non-selected ones.\n\n* For the component ease of use, add WrapperComponent in which a render container and a portalContainer will be implemented.\n\n* Callbacks trigger for each element entering or leaving the selection.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreizanik%2Freact-mouse-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreizanik%2Freact-mouse-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreizanik%2Freact-mouse-select/lists"}