elondormancy / selection

✨ Viselect - 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.

Visual dom-selection library

Version 3 is currently released under a beta, please check the release notes for changes. Feedback is highly appreciated. If you're looking for v2, you can find it here (depreacted).

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 (demo) - To be used with plain JavaScript or TypeScript.
• @viselect/preact (demo) - Preact wrapper.
• @viselect/react (demo) - React wrapper.
• @viselect/vue (demo) - Vue3 wrapper.
• @viselect/lit - TBA (planned).
• @viselect/svelte - TBA (planned).
• @viselect/angular - TBA (planned).

Check out recipes for commonly asked questions and how to solve them using the standart library! For information about events and more check out the vanilla readme!

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 a try, it's awesome) you'll have to install corresponding plugins such as 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 :)

Development

Use the following commands to work on this locally (we use lerna 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 is used. It's superb, you should give it a try. To bundle it we use rollup (which is btw also used by vite behind the scenes) to have full control over how the bundle looks like.

You want to contribute?

That's awesome! Check out the contribution guidelines to get started :)