JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<input type="text" name="" id="message"><span id="counter"></span>

JavaScript

const value = getterProxy(() => message.value);

setInterval(() => {
		counter.textContent = value.length;
}, 100);

function getterProxy(getter) {
const methods = ['get', 'set', 'deleteProperty', 'enumerate', 'ownKeys', 'has', 'defineProperty', 'getOwnPropertyDescriptor'];
const traps = {};
for (const method of methods) {
	traps[method] = (...args) => Reflect[method](getter(), ...args);
}
return new Proxy({}, traps);
}