https://github.com/Simonwep/selection

✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies, super small. Support for major frameworks!
https://github.com/Simonwep/selection

dom-selection javascript-library js-library preact react select selection selections ui ux-design ux-experience viselect vue

Last synced: about 1 month ago
JSON representation

✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies, super small. Support for major frameworks!

• Host: GitHub
• URL: https://github.com/Simonwep/selection
• Owner: simonwep
• License: mit
• Created: 2018-04-21T15:37:08.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-24T16:20:36.000Z (5 months ago)
• Last Synced: 2024-07-30T05:18:05.406Z (about 1 month ago)
• Topics: dom-selection, javascript-library, js-library, preact, react, select, selection, selections, ui, ux-design, ux-experience, viselect, vue
• Language: TypeScript
• Homepage: https://simonwep.github.io/selection
• Size: 4.01 MB
• Stars: 2,468
• Watchers: 25
• Forks: 143
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - selection - A simple and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies, super small. Support for major frameworks. | Simonwep | 1460 | (TypeScript)

README

        


    





    Visual dom-selection library 





    

    

    

    

    

    

    

    

    

    

    

    



### Features 🤘

* 🌟 Modern bundle

* 🔩 Ultra tiny (~4kb)

* 👌 Simple usage

* ⚡ Highly optimized

* ✔ Zero dependencies

* 📱 Mobile / touch support

* 🖱 Vertical and horizontal scroll support

* 💪 Hardened (over 3 years old and used in many apps)

* 🖼 Support for major frameworks (WIP)

### Getting started

Check out the documentation for the package you want to use:

* [@viselect/vanilla](packages/vanilla) - To be used with plain [JavaScript](http://vanilla-js.com/) or [TypeScript](https://www.typescriptlang.org/).

* [@viselect/preact](packages/preact) - [Preact](https://preactjs.com/) wrapper.

* [@viselect/react](packages/react) - [React](https://reactjs.org/) wrapper.

* [@viselect/vue](packages/vue)  - [Vue3](https://v3.vuejs.org/) wrapper.

> Check out [recipes](packages/vanilla/recipes.md) for commonly asked questions and how to solve them using the standart library!

> For information about events and more check out the [vanilla readme](packages/vanilla/README.md)!

### Browser support

This library will always have the previous year as its target. For 2021 for example the target will be ES2020.

It always provides both a `UMD` (`.js`) and `.mjs` version. If you want to support legacy browsers, please use the feature of your bundler to transpile dependencie. In case of

webpack and babel (give [vite](https://vitejs.dev/) a try, it's awesome) you'll have to install corresponding plugins such

as [babel-plugin-proposal-optional-chaining](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) and include the dependency from `node_modules` which is normally

entirely excluded from being processed.

I do this to provide maximum flexibility and give those who target ESNext a chance to make full use of how this library is bundled.

Everything else is just a matter of configuration :)

### Is this library the right choice for me?

Viselect primarily focuses on being a high-performant engine to select elements with various boundaries, behaviours and modes in your browser.

Viselect is to "full-blown libraries" what is [popper.js](https://popper.js.org/) to [tippy.js](https://atomiks.github.io/tippyjs/) - the _core_ of your feature / of another

library.

### Development

Use the following commands to work on this locally (we use [lerna](https://lerna.js.org/) to manage this):

* `npm run dev` _- Spawns a dev-server for all packages. Every framework-dependend package is bundled with the vanilla version._

* `npm run build` _- Builds all packages in parallel._

* `npm run lint:fix` _- Lints and fixes all errors in all packages._

For the development servers [vite](https://vitejs.dev/) is used. It's superb, you should give it a try.

To bundle it we use [rollup](https://rollupjs.org/) (which is btw also used by vite behind the scenes) to have full control over how the bundle looks like.

### Releasing a new version

This project is managed via [lerna](https://lerna.js.org/).

To bump the version and publish a new one run the following commands:

* `lerna version`

* `lerna publish from-package`

### You want to contribute?

That's awesome! Check out the [contribution guidelines](./.github/CONTRIBUTING.md) to get started :)