React-screen-with-fixed-resolution NPM

react-screen-with-fixed-resolution

A package for React web applications that provides a fixed resolution layout.
With this package, all elements are adjusted to a fixed resolution, preventing the layout from breaking when the browser window is resized.

npm.io

Benefits

Prevents layout breakage: Since all elements are adjusted to a fixed resolution, the layout won't break when the browser window is resized.
Maintains consistency: All users see the same layout, ensuring consistency across the application.
Easy to use: The package is easy to use in React applications.

Usage

You can install this package using npm or yarn:

npm install react-screen-with-fixed-resolution

# or

yarn add react-screen-with-fixed-resolution

Then, wrap your application's root component with the Screen component, specifying the desired resolution as props

import Screen from "react-screen-with-fixed-resolution";

function App() {
  return (
    <Screen width={1920} height={1080}>
      {/* your app content */}
    </Screen>
  );
}

Props

The component takes the following props:

width (required): The width of the content in pixels.
height (required): The height of the content in pixels.
delay (optional, default: 100): debounce time for the resize event. (in milliseconds)

Contributing

If you find a bug or have a feature request, please open an issue.
If you'd like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcome.