useScreen

Get the size of your screen. At the moment just get the screen size at the first load, does not exists listener to get the screen on change the screen, but it is planned to the next iteration.

Inspired on:

TODO

  • Listen on change the screen

Visual example

site title
domain.tld
The current window dimensions are: {"width":0,"height":0}

Code base

export function useScreen(): Partial<Screen> {
	const getScreen = (): Partial<Screen> => {
		if (typeof window !== "undefined" && window.screen) {
			return window.screen;
		}

		return {
			width: 0,
			height: 0,
		};
	};

	return getScreen();
}

Code example

<!-- javascript -->
<script lang="ts">
import { useScreen } from "@/hooks";

const screen = useScreen();
</script>

<!-- html -->
<div>
	The current window dimensions are:
	<code>
		{JSON.stringify({ width: $screen?.width, height: $screen?.height })}
	</code>
</div>
useMediaQuery
useScript