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: 15 days 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-09-29T07:05:52.000Z (about 1 month ago)
• Last Synced: 2024-10-14T03:20:44.485Z (30 days 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.08 MB
• Stars: 2,508
• Watchers: 25
• Forks: 147
• 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 standard library!

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

### Browser support

This library will always produce an ESNext bundle.

If you want to support legacy browsers, please use the feature of your bundler to transpile dependencies.

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, behaviors, 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.

### 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-dependent 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 :)