Installation

npm i react-responsive-utilities

1 - Wrap the project in <Responsive />

We need to wrap the whole app in a *Responsive* component that acts as a provider for responsive utilities. This component requires a prop *screenWidth* which is for the mobile/small size dimensions

**import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { Responsive } from "react-responsive-utilities";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    *<Responsive screenWidth={300}>*
      <App />
    *</Responsive>*
  </React.StrictMode>
);**

We are using 300px as the reference dimension for our current responsive mobile device. For example, if a component’s text size/width/height is set to 20px at 300px, it will remain 20px. On smaller dimensions, it will shrink, and on larger dimensions, it will grow.

<aside> ⚠️ Note: The desktop dimensions aren’t required, as the maximum size for components will be the desktop size

</aside>

2 - Components

import { Container, Text } from "react-responsive-utilities";

3 - Usage

import { Container, Text } from "react-responsive-utilities";

function App() {
  return (
    <Container
      style={styles.container}
      width={[1, 290, 500]}
      height={[1, 400, 500]}
      
    >
      <Text textSize={[0, 30, 50]}>Hello Saturn 🪐</Text>
    </Container>
  );
}

const styles = {
  container: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "column" as const,
    backgroundColor: "#f7f7f7",
    boxShadow: "0 0 10px blue",
    borderRadius: 10,
  },
};

export default App;

ViteReactTS-Brave2024-07-3016-08-16-ezgif.com-speed.gif

4 - Understanding props

Container:

width an array containing the width values from minimum, current to maximum
height an array containing the height values from minimum, current to maximum
doNotResizeWidth boolean that do not allow width to be resized, it then uses current value as default height
doNotResizeHeight boolean that do not allow height to be resized, it then uses current value as default height

Text props:

*textSize* An array containing the minimum, current and maximum font size values