stylesheets-for-viewports v1.0.1

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 (Expo Snack).

Installation

If you use expo, use:

expo install stylesheets-for-viewports

Otherwise, for npm use:

npm i stylesheets-for-viewports --save

And for yarn use:

yarn add stylesheets-for-viewports

Usage

First, wrap your main app with the context provider, like so:

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<MyViewports> = [
  { name: "MOBILE", lowestWidth: undefined },
  { name: "TABLET", lowestWidth: 768 },
  { name: "DESKTOP", lowestWidth: 1280 },
];

export default function App() {
  return (
    <ViewportContextProvider<MyViewports> viewports={myViewportConfig}>
      <MyApp />
    </ViewportContextProvider>
  );
}

After that, you can use the responsive stylesheets, like so:

import { Text, View } from "react-native";
import {
  IResponsiveStyles,
  useResponsiveStyles,
} from "stylesheets-for-viewports";
// also import MyViewports ;)

export const TestComponent = () => {
  const styles = useResponsiveStyles(responsiveStyles);
  return (
    <View style={styles.container}>
      <Text style={styles.text}>TestComponent</Text>
    </View>
  );
};

const responsiveStyles: IResponsiveStyles<MyViewports, "container" | "text"> = {
  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:

useResponsiveDimensions hook

The library also exports the internally used useResponsiveDimensions hook. Feel free to use it, it returns the following object:

{
  dimensions: ScaledSize; // <-- the current width, scale, etc.
  viewport: V; // <-- the current viewport
}

If you enjoy using this...