Lightweight, type-safe, and SSR-friendly responsive utilities for React.
npm install ek-viewportbash
npm install ek-viewport
or
yarn add ek-viewport
or
pnpm add ek-viewport
`
---
Setup (Optional Custom Config)
By default, ek-viewport uses standard Tailwind CSS breakpoints. You can customize them using the ViewportProvider.
`tsx
import { ViewportProvider } from 'ek-viewport';
const customBreakpoints = {
md: 800,
lg: 1100
};
const App = () => (
);
`
---
Usage
$3
Returns true if the viewport is above the specified breakpoint.
`tsx
import { useBreakpoint } from 'ek-viewport';
const MyComponent = () => {
const isDesktop = useBreakpoint('lg');
return {isDesktop ? "Desktop View" : "Mobile View"};
};
`
$3
Manage layouts without complex ternary operators.
`tsx
import { Show, Hide } from 'ek-viewport';
const Navbar = () => (
);
`
$3
#### useScrollDirection
Detects if the user is scrolling 'up' or 'down'.
`tsx
import { useScrollDirection } from 'ek-viewport';
const Header = () => {
const direction = useScrollDirection();
return (
...
);
};
`
#### useWindowSize
Track exact pixel dimensions.
`tsx
import { useWindowSize } from 'ek-viewport';
const MyComponent = () => {
const { width, height } = useWindowSize();
return Window: {width} x {height};
};
`
#### useOrientation
Detect landscape or portrait mode.
`tsx
import { useOrientation } from 'ek-viewport';
const MyComponent = () => {
const { isLandscape } = useOrientation();
return {isLandscape ? 'Landscape' : 'Portrait'};
};
`
---
Developer Experience (Debug Tool)
Stop guessing which breakpoint is active. Drop the DebugOverlay at the root of your app during development.
`tsx
import { DebugOverlay } from 'ek-viewport';
const App = () => (
<>
);
``