npm i react-responsive-utilities
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>
import { Container, Text } from "react-responsive-utilities";
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;
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 |
---|