useMouseButton

useMouseButton(button) returns a reactive reader that is true while the given button is held, and updates only when that button's state flips. Part of pota/use/mouse; the first call lazily installs the shared window listeners.

For a non-reactive snapshot of every held button, use mouseButtons.

Arguments

Argument	Type	Description
button	number	Button index following PointerEvent.button (0–4).

Returns: () => boolean — a reader, true while the button is held.

Examples

Show which buttons are down

Render a live indicator per button by reading each reader in JSX. Pass the reader function (left), not its result, so the text stays reactive.

import { render } from 'pota'
import { useMouseButton } from 'pota/use/mouse'

function App() {
	const left = useMouseButton(0)
	const middle = useMouseButton(1)
	const right = useMouseButton(2)

	return (
		<ul>
			<li>left: {() => (left() ? 'down' : 'up')}</li>
			<li>middle: {() => (middle() ? 'down' : 'up')}</li>
			<li>right: {() => (right() ? 'down' : 'up')}</li>
		</ul>
	)
}

render(App)

Pan while the middle button is held

Drive an effect from the reader to start and stop panning as the middle button toggles.

import { effect, render, signal } from 'pota'
import { useMouseButton } from 'pota/use/mouse'

function App() {
	const middle = useMouseButton(1)
	const log = signal('hold middle button to pan')

	effect(() => {
		if (middle()) log.write('start panning')
		else log.write('stop panning')
	})

	return <p>{log.read}</p>
}

render(App)