Skip to main content

useBreakpoints

React to changes in the viewport with custom defined breakpoints.

Demo

- Resize the window to see the breakpoint change.

Overview

useBreakpoints is a utility that allows you to react to changes in the viewport with custom defined breakpoints. By default, it uses the Tailwind CSS breakpoints.

Usage

		<script lang="ts">
	import { useBreakpoints } from "runed";
 
	const breakpoints = useBreakpoints();
</script>
 
{#if breakpoints.sm}
	<p>Small screen</p>
{/if}
 
{#if breakpoints.md}
	<p>Medium screen</p>
{/if}

Examples

Defining Custom Breakpoints

		<script lang="ts">
	import { useBreakpoints } from "runed";
 
	const breakpoints = useBreakpoints({
		custom: "100rem"
	});
</script>
 
{#if breakpoints.custom}
	<p>Custom breakpoint</p>
{/if}