mouseButtons

mouseButtons() returns the live Set<number> of currently held buttons, mutated in place — treat it as read-only. It is not reactive: read it inside a requestAnimationFrame loop or an event handler where subscribing would be wasted overhead. For a reactive per-button boolean, use useMouseButton.

The first call lazily installs the shared window listeners.

Returns: Set<number> — the live set of held button indices.

Examples

Paint while dragging, in a rAF loop

Read the live set and the latest mousePosition() each frame instead of subscribing, so the canvas only redraws while the primary button is down.

import { render } from 'pota'
import { mouseButtons, mousePosition } from 'pota/use/mouse'
import { useAnimationFrame } from 'pota/use/animate'

function App() {
	let canvas
	const held = mouseButtons()

	const ctx = () => canvas.getContext('2d')

	useAnimationFrame(() => {
		if (held.has(0)) {
			const { x, y } = mousePosition()
			const rect = canvas.getBoundingClientRect()
			ctx().fillRect(x - rect.left, y - rect.top, 4, 4)
		}
	}).start()

	return (
		<canvas
			width="400"
			height="300"
			use:ref={el => (canvas = el)}
		/>
	)
}

render(App)