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;

4 - Understanding props

Container:

Text props: