• Stars
    star
    2,494
  • Rank 18,413 (Top 0.4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

โœจ 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!

Logo

Visual dom-selection library

License MIT No dependencies Support me version Buy me a coffee Build Status gzip size brotli size Vue support Preact support React support Svelte support

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:

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

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 to tippy.js - the core of your feature / of another library.

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.

Releasing a new version

This project is managed via lerna. 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 to get started :)

More Repositories

1

pickr

๐ŸŽจ Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
JavaScript
4,290
star
2

nanopop

๐Ÿฆ Minimalistic, small, positioning engine. Build for high-performance, minimal footprint and maximum control over positioning behavior.
TypeScript
643
star
3

candy

๐Ÿญ Cross-platform YouTube-downloader with playlist and channel support as well as build-in audio / video converter.
Vue
237
star
4

java-express

๐Ÿงช HTTP Framework based on expressjs, no dependencies, simple usage. Can be used to quickly spin up an API or serve local files.
Java
196
star
5

presentr

Minimalistic javascript presentation-library. Zero dependencies. Can be used in combination with frameworks like Bootstrap, Materialize, Vue etc.
JavaScript
71
star
6

openvpn-pihole

๐Ÿ•ต๏ธ A truly delicious combination of two wonderful pieces of software to setup a pi.hole-backed VPN as quick as possible.
Shell
68
star
7

gpickr

Demo of pickr integrated into another widget. A gradient-picker.
JavaScript
60
star
8

ocular

๐Ÿ’ฐ Simplistic, beautiful and straight-forward budgeting app to track your budget across the years. Easy to use, to get started and to set up.
Vue
59
star
9

sassyfication

๐Ÿ’…Library with sass mixins to speed up your css workflow.
SCSS
58
star
10

graceful-ws

๐Ÿ”Œ Graceful WebSocket wrapper with connection re-establishment capabilities.
TypeScript
41
star
11

li18nt

๐ŸŒŽ Lint your i18n translation files. Detect conflicting properties, duplicates and make it more readable and easier to maintain by formatting it!
TypeScript
38
star
12

nason

๐Ÿ“ฆ Ultra tiny serializer / encoder with plugin-support. Useful to build binary files containing images, strings, numbers and more!
TypeScript
35
star
13

vite-plugin-optimize-css-modules

๐Ÿ—œ Mangle / minimize css module classnames in production like facebook and Google do!
TypeScript
28
star
14

cinematic

๐Ÿ“ฝ๏ธ Ultra tiny library to add cinematics to your HTML5 videos!
TypeScript
22
star
15

conway

๐Ÿ•น Supercharged version of conways game-of-life brought to life by wasm and workers.
TypeScript
12
star
16

spectrum

๐ŸŽ™๏ธ Fast, installable, in-browser audio spectrum visualizer. Support for both realtime and audio files!
TypeScript
11
star
17

bavary

๐Ÿงฌ Regular expressions on steroids. Parse anything and everything with a syntax - crafted to parse syntax. A super-set of regular-expressions.
TypeScript
10
star
18

eslint-plugin-align-import

โš™ ESLint plugin to align all your import statements.
JavaScript
8
star
19

ocular-docker

Ready-to-use docker compose setup for ocular โœจ
Shell
8
star
20

widgetify

Simple widget library which helps to quickly create a new, responsive, interactive widget or ui tool.
JavaScript
7
star
21

intl-demo

Interactive demo of the ECMAScript Internationalization API
JavaScript
5
star
22

yuppee

โš™๏ธ Type-safe migration library to migrate data from one schema to another.
TypeScript
4
star
23

reinisch.io

๐Ÿ”ฒ My Personal Homepage :)
TypeScript
3
star
24

reactivity-playground

๐Ÿ’ซ Simple recreation of reactivity as its mainly used in Vue3
TypeScript
3
star
25

cssvjs

Fast, spec-conform css-value parser written entirely in vanilla JavaScript. Can be used in any environment.
JavaScript
3
star
26

cleanup-files

๐Ÿงผ Small utilities to cleanup directories such as download which are all the time full of random stuff.
Rust
1
star
27

genesis

๐Ÿงž A simple, generic, fast and lightweight json api for frontend apps. Store your frontend-data as-is without messing around with a database!
Go
1
star
28

bavary-webpack-loader

Webpack loader for bavary declarations
JavaScript
1
star
29

eslint-config-simon

โš™ Eslint config files for my personal projects.
JavaScript
1
star
30

previous-index-of

Find the previous index of a char-sequence at a given offset in a string
JavaScript
1
star
31

bavary-cli

Bavary CLI
TypeScript
1
star