Skip to content

Instantly share code, notes, and snippets.

@mediabeastnz

mediabeastnz/screen.tsx

Created April 11, 2024 02:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mediabeastnz/7ed7510f3569508f8119e45dd43424d8 to your computer and use it in GitHub Desktop.
Save mediabeastnz/7ed7510f3569508f8119e45dd43424d8 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind Screen size widget
Raw
screen.tsx
"use client";
import React from 'react';
const ScreenSize = () => {
const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
React.useEffect(() => {
function updateDimensions() {
setDimensions({
width: window.innerWidth,
height: window.innerHeight
});
}
updateDimensions();
window.addEventListener('resize', updateDimensions);
return () => {
window.removeEventListener('resize', updateDimensions);
};
}, []);
const { width, height } = dimensions;
return (
<div className="fixed bottom-5 left-5 z-50 flex items-center space-x-2 rounded-full bg-black px-2.5 py-1 font-mono text-xs font-medium text-white">
<span>
{width.toLocaleString()} x {height.toLocaleString()}
</span>
<div className="h-4 w-px bg-gray-800" />
<span className="sm:hidden">XS</span>
<span className="hidden sm:inline md:hidden">SM</span>
<span className="hidden md:inline lg:hidden">MD</span>
<span className="hidden lg:inline xl:hidden">LG</span>
<span className="hidden xl:inline 2xl:hidden">XL</span>
<span className="hidden 2xl:inline">2XL</span>
</div>
);
};
export default ScreenSize;
@mediabeastnz
Copy link
Author

Usage:

import ScreenSize from 'screen'; // change path

...
<body>
  <ScreenSize />
</body>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment