react-selecto - npm Package Compare versions

Comparing version 0.0.16 to 0.1.0

dist/selecto.cjs.js

 /*
-Copyright (c) 2019 Daybrush
+Copyright (c) 2020 Daybrush
 name: react-selecto
@@ -7,3 +7,3 @@ license: MIT
 repository: https://github.com/daybrush/selecto/blob/master/packages/react-selecto
-version: 0.0.16
+version: 0.1.0
 */
@@ -10,0 +10,0 @@ 'use strict';

dist/selecto.esm.js

 /*
-Copyright (c) 2019 Daybrush
+Copyright (c) 2020 Daybrush
 name: react-selecto
@@ -7,3 +7,3 @@ license: MIT
 repository: https://github.com/daybrush/selecto/blob/master/packages/react-selecto
-version: 0.0.16
+version: 0.1.0
 */
@@ -10,0 +10,0 @@ import { createElement, PureComponent } from 'react';

package.json

 {
   "name": "react-selecto",
-  "version": "0.0.16",
+  "version": "0.1.0",
   "description": "A React Selecto Component that allows you to select elements in the drag area using the mouse or touch.",
@@ -46,3 +46,3 @@ "main": "./dist/selecto.cjs.js",
   "dependencies": {
-    "selecto": "0.0.29"
+    "selecto": "^0.1.0"
   },
@@ -49,0 +49,0 @@ "browserslist": {

README.md

 
+<p align="middle" ><img src="https://daybrush.com/selecto/images/logo.png" /></p>
+<h2 align="middle">React Selecto</h2>
+<p align="middle">
+<a href="https://www.npmjs.com/package/react-selecto" target="_blank"><img src="https://img.shields.io/npm/v/react-selecto.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a>
+<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square"/>
+<a href="https://github.com/daybrush/selecto/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/daybrush/selecto.svg?style=flat-square&label=license&color=08CE5D"/></a>
+<a href="https://github.com/daybrush/selecto/tree/master/packages/react-selecto" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
+<a href="https://github.com/daybrush/selecto/tree/master/packages/preact-selecto" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
+<a href="https://github.com/daybrush/selecto/tree/master/packages/ngx-selecto" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
+<a href="https://github.com/daybrush/selecto/tree/master/packages/vue-selecto" target="_blank"><img
+    alt="Vue"
+    src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984"></a>
+<a href="https://github.com/daybrush/selecto/tree/master/packages/svelte-selecto" target="_blank"><img
+    alt="Svelte"
+    src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
+<a href="https://github.com/daybrush/selecto/tree/master/packages/lit-selecto" target="_blank"><img
+    alt="Lit"
+    src="https://img.shields.io/static/v1.svg?label=&message=Lit&style=flat-square&color=4E8EE0"></a>
+</p>
+<p align="middle">React Selecto is a React component that allows you to select elements in the drag area using the mouse or touch.</p>
+
+<p align="middle">
+    <a href="https://daybrush.com/selecto" target="_blank"><strong>Demo</strong></a> /
+    <a href="https://daybrush.com/selecto/release/latest/doc/" target="_blank"><strong>API</strong></a> /
+    <a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a>
+</p>
+
+## ⚙️ Installation
+### npm
+```bash
+$ npm install react-selecto
+```
+
+## 🚀 How to use
+```tsx
+import Selecto from "react-selecto";
+
+<Selecto
+    // The container to add a selection element
+    container={document.body}
+    // The area to drag selection element (default: container)
+    dragContainer={window}
+    // Targets to select. You can register a queryselector or an Element.
+    selectableTargets={[".target", document.querySelector(".target2")]}
+    // Whether to select by click (default: true)
+    selectByClick={true}
+    // Whether to select from the target inside (default: true)
+    selectFromInside={true}
+    // After the select, whether to select the next target with the selected target (deselected if the target is selected again).
+    continueSelect={false}
+    // Determines which key to continue selecting the next target via keydown and keyup.
+    toggleContinueSelect={"shift"}
+    // The container for keydown and keyup events
+    keyContainer={window}
+    // The rate at which the target overlaps the drag area to be selected. (default: 100)
+    hitRate={100}
+    onSelect={e => {
+        e.added.forEach(el => {
+            el.classList.add("selected");
+        });
+        e.removed.forEach(el => {
+            el.classList.remove("selected");
+        });
+    }}
+    />
+```
+
 ## ⚙️ Developments
@@ -12,3 +79,2 @@ ### `npm start`
 
-
 ## ⭐️ Show Your Support
@@ -34,3 +100,3 @@ Please give a ⭐️ if this project helped you!
 
-Copyright (c) 2019 Daybrush
+Copyright (c) 2020 Daybrush
 
@@ -37,0 +103,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

454053

increased by0.82%

Number of lines in readme file

119

increased by124.53%

Dependency changes

• + Added@daybrush/drag@0.14.0(transitive)

• + Addedselecto@0.1.0(transitive)

• - Removed@daybrush/drag@0.12.0(transitive)

• - Removedselecto@0.0.29(transitive)

• Updatedselecto@^0.1.0