Browser
useBreakpoints
Reactive viewport breakpoints
Example
Usages
<script>
import { useBreakpoints, breakpointsTailwind } from 'svegos';
const breakpoints = useBreakpoints(breakpointsTailwind);
const smAndLarger = breakpoints.greaterOrEqual('sm'); // sm and larger
const largerThanSm = breakpoints.greater('sm'); // only larger than sm
const lgAndSmaller = breakpoints.smallerOrEqual('lg'); // lg and smaller
const smallerThanLg = breakpoints.smaller('lg'); // only smaller than lg
</script>
<script>
import { useBreakpoints } from 'svegos';
const breakpoints = useBreakpoints({
mobile: 0, // optional
tablet: 640,
laptop: 1024,
desktop: 1280
});
// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
const activeBreakpoint = breakpoints.active();
// true or false
const laptop = breakpoints.between('laptop', 'desktop');
</script>
<div class={activeBreakpoint}>...</div>