https://github.com/maks-io/stylesheets-for-viewports
Lightweight react native library for using different stylesheets based on current viewport (width, scale, etc.).
https://github.com/maks-io/stylesheets-for-viewports
react-native responsive stylesheets viewports
Last synced: 2 months ago
JSON representation
Lightweight react native library for using different stylesheets based on current viewport (width, scale, etc.).
- Host: GitHub
- URL: https://github.com/maks-io/stylesheets-for-viewports
- Owner: maks-io
- License: mit
- Created: 2024-03-10T21:44:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-09T00:31:29.000Z (almost 2 years ago)
- Last Synced: 2025-05-15T13:11:30.937Z (about 1 year ago)
- Topics: react-native, responsive, stylesheets, viewports
- Language: TypeScript
- Homepage:
- Size: 3.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# stylesheets-for-viewports 📱🖥️
[](https://www.npmjs.com/package/stylesheets-for-viewports)
Lightweight react native library for using different stylesheets based on current viewport (width, scale, etc.).
## Demo
## Live Demos
Check out the [Live Demo here](https://snack.expo.dev/@maks-io/stylesheets-for-viewports-demo?platform=web) (Expo Snack).
## Installation
If you use expo, use:
```bash
expo install stylesheets-for-viewports
```
Otherwise, for npm use:
```bash
npm i stylesheets-for-viewports --save
```
And for yarn use:
```bash
yarn add stylesheets-for-viewports
```
## Usage
First, wrap your main app with the context provider, like so:
```tsx
import {
ViewportContextProvider,
IViewportConfig,
} from "stylesheets-for-viewports";
// define your viewports via typescript:
export type MyViewports = "MOBILE" | "TABLET" | "DESKTOP";
// define your viewport config:
const myViewportConfig: IViewportConfig = [
{ name: "MOBILE", lowestWidth: undefined },
{ name: "TABLET", lowestWidth: 768 },
{ name: "DESKTOP", lowestWidth: 1280 },
];
export default function App() {
return (
viewports={myViewportConfig}>
);
}
```
After that, you can use the responsive stylesheets, like so:
```tsx
import { Text, View } from "react-native";
import {
IResponsiveStyles,
useResponsiveStyles,
} from "stylesheets-for-viewports";
// also import MyViewports ;)
export const TestComponent = () => {
const styles = useResponsiveStyles(responsiveStyles);
return (
TestComponent
);
};
const responsiveStyles: IResponsiveStyles = {
DESKTOP: {
container: {
backgroundColor: "blue",
},
text: { fontSize: 14 },
},
MOBILE: {
container: { backgroundColor: "lightblue" },
text: { fontSize: 10 },
},
// if you don't want to provide a style for every single viewport,
// you can alternatively also provide an 'OTHER' entry, which kicks in...
// for all other viewports:
OTHER: { container: { backgroundColor: "grey" }, text: { fontSize: 8 } },
};
```
## Props
Besides the type parameter `V`, the `ViewportContextProvider` accepts 2 props:
| prop | required | type | description |
| -------------------- | -------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `viewports` | yes | `IViewportConfig` | Define your viewports here, by providing the names and their lowest width value in pixels. Make sure the viewports are sorted in an ascending way, from lowest to highest width. The smallest viewport needs to have its `lowestWidth` set to `undefined`. Check the example above. |
| `getCurrentViewport` | no | `(windowDimensions: ScaledSize, viewports: IViewportConfig) => V` | This optional prop provides a way of replacing the built-in function, that determines which viewport is the current one. While the built-in version only checks the current screen width, with the custom version you can add more complexity to the logic (like considering the `scale` factor for instance, etc.) |
## useResponsiveDimensions hook
The library also exports the internally used `useResponsiveDimensions` hook. Feel free to use it, it returns the following object:
```typescript
{
dimensions: ScaledSize; // <-- the current width, scale, etc.
viewport: V; // <-- the current viewport
}
```
## If you enjoy using this...
