useOrientation

useOrientation() returns a signal accessor for the current screen orientation, from pota/use/orientation. The classification is width >= height ? 'horizontal' : 'vertical', so square viewports report 'horizontal'. It updates as the window resizes (including device rotation).

Arguments

useOrientation() takes no arguments.

Returns: a signal accessor (reader function) yielding 'horizontal' | 'vertical'. Pass it directly as a child or prop to keep it reactive; it shares the underlying documentSize listener with other subscribers. For a side-effecting callback instead of a reactive value, use onOrientation.

Examples

Display the current orientation

Renders the live orientation. The accessor is passed as a child, so the text updates on every resize without an effect.

import { render } from 'pota'
import { useOrientation } from 'pota/use/orientation'

function App() {
	const orientation = useOrientation()

	return (
		<div>
			<p>
				Current orientation: <strong>{orientation}</strong>
			</p>
			<p>
				<em>resize the window to flip it.</em>
			</p>
		</div>
	)
}

render(App)

Swap layouts by orientation

Picks a different layout per orientation with Show, driving its when from the accessor.

import { render } from 'pota'
import { Show } from 'pota/components'
import { useOrientation } from 'pota/use/orientation'

function App() {
	const orientation = useOrientation()
	const isWide = () => orientation() === 'horizontal'

	return (
		<Show
			when={isWide}
			fallback={<aside>stacked layout</aside>}
		>
			<section>side-by-side layout</section>
		</Show>
	)
}

render(App)