watching you

Características

• ¡Ser capaz de ver el mouse u otro DOM, o incluso valores de entrada, mire lo que desee!
• Debido a que está basado en DOM, es fácil admitir RWD
• Admite múltiples marcos
• Dependencia cero (¡cada marco es!)
• Escrito en TypeScript
• El tamaño del código central es de solo 3 kb después de la compresión de GZIP
• Si el elemento no está en la pantalla, automáticamente dejará de mirar

Ejemplo

• Formulario de inicio de sesión
• Cadena de hierro
• Cena te está mirando
• SVG Path Watcher

El código fuente se puede encontrar aquí

Libro de cuentos

Mirando el libro de cuentos usando React, ¡pero cada marco puede hacer lo mismo!

https://jj811208.github.io/watching-you/storybook

Documentos

️ La API todavía está sujeta a cambios hasta que se lanza la versión 1.0.0 ️

• Vainilla.js
• Reaccionar
• Vue

Compatibilidad

Si usa watching-you directamente sin ningún compilador (Babel) (por ejemplo, el proyecto de WordPress utilizando CDN Import watching-you )

	Cromo	Firefox	Safari	Borde	Ópera	iOS Safari/Chrome	Android Chrome
Compatible	70+	73+	14.1+	80+	70+	14.1+	✔

Pero si usa un compilador como Babel e Import Polyflill, incluso puede admitir IE11

Algunas referencias:
https://babeljs.io/
https://github.com/vitejs/vite/tree/main/packages/plugin-legacy

Nota

• Al ver input o textarea , el atributo de text-align debe left
• Algunos elementos en línea ignoran el atributo transform (digamos span ), por lo que debe darles el atributo display para que funcione correctamente. (Ver: https://stackoverflow.com/questions/24961795/how-can-i-use-css3-transform-on-aspan)
• Es posible que necesite algo como transition: transform .1s dependiendo de sus necesidades

Licencia

ISC