{"id":18556310,"url":"https://github.com/maks-io/stylesheets-for-viewports","last_synced_at":"2026-05-18T06:40:02.538Z","repository":{"id":227173814,"uuid":"770085995","full_name":"maks-io/stylesheets-for-viewports","owner":"maks-io","description":"Lightweight react native library for using different stylesheets based on current viewport (width, scale, etc.).","archived":false,"fork":false,"pushed_at":"2024-09-09T00:31:29.000Z","size":4036,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-15T13:11:30.937Z","etag":null,"topics":["react-native","responsive","stylesheets","viewports"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maks-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-03-10T21:44:31.000Z","updated_at":"2024-03-11T20:13:08.000Z","dependencies_parsed_at":"2024-11-06T21:34:24.565Z","dependency_job_id":null,"html_url":"https://github.com/maks-io/stylesheets-for-viewports","commit_stats":null,"previous_names":["maks-io/stylesheets-for-viewports"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maks-io/stylesheets-for-viewports","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maks-io%2Fstylesheets-for-viewports","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maks-io%2Fstylesheets-for-viewports/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maks-io%2Fstylesheets-for-viewports/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maks-io%2Fstylesheets-for-viewports/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maks-io","download_url":"https://codeload.github.com/maks-io/stylesheets-for-viewports/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maks-io%2Fstylesheets-for-viewports/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267914485,"owners_count":24164729,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","responsive","stylesheets","viewports"],"created_at":"2024-11-06T21:29:50.052Z","updated_at":"2026-05-18T06:39:57.510Z","avatar_url":"https://github.com/maks-io.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/maks_io"],"categories":[],"sub_categories":[],"readme":"# stylesheets-for-viewports 📱🖥️\n\n[![Version](https://img.shields.io/npm/v/stylesheets-for-viewports)](https://www.npmjs.com/package/stylesheets-for-viewports)\n\nLightweight \u003cstrong\u003ereact native\u003c/strong\u003e library for using different stylesheets based on current viewport (width, scale, etc.).\n\n## Demo\n\n\u003ca href=\"https://youtube.com/shorts/eJncOdHndys?feature=share\"\u003e\u003cimg src=\"documentation/stylesheets-for-viewports-gif-02.gif\" alt=\"demo-gif\"\u003e\u003c/a\u003e\n\n## Live Demos\n\nCheck out the [Live Demo here](https://snack.expo.dev/@maks-io/stylesheets-for-viewports-demo?platform=web) (Expo Snack).\n\n## Installation\n\nIf you use expo, use:\n\n```bash\nexpo install stylesheets-for-viewports\n```\n\nOtherwise, for npm use:\n\n```bash\nnpm i stylesheets-for-viewports --save\n```\n\nAnd for yarn use:\n\n```bash\nyarn add stylesheets-for-viewports\n```\n\n## Usage\n\nFirst, wrap your main app with the context provider, like so:\n\n```tsx\nimport {\n  ViewportContextProvider,\n  IViewportConfig,\n} from \"stylesheets-for-viewports\";\n\n// define your viewports via typescript:\nexport type MyViewports = \"MOBILE\" | \"TABLET\" | \"DESKTOP\";\n\n// define your viewport config:\nconst myViewportConfig: IViewportConfig\u003cMyViewports\u003e = [\n  { name: \"MOBILE\", lowestWidth: undefined },\n  { name: \"TABLET\", lowestWidth: 768 },\n  { name: \"DESKTOP\", lowestWidth: 1280 },\n];\n\nexport default function App() {\n  return (\n    \u003cViewportContextProvider\u003cMyViewports\u003e viewports={myViewportConfig}\u003e\n      \u003cMyApp /\u003e\n    \u003c/ViewportContextProvider\u003e\n  );\n}\n```\n\nAfter that, you can use the responsive stylesheets, like so:\n\n```tsx\nimport { Text, View } from \"react-native\";\nimport {\n  IResponsiveStyles,\n  useResponsiveStyles,\n} from \"stylesheets-for-viewports\";\n// also import MyViewports ;)\n\nexport const TestComponent = () =\u003e {\n  const styles = useResponsiveStyles(responsiveStyles);\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText style={styles.text}\u003eTestComponent\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst responsiveStyles: IResponsiveStyles\u003cMyViewports, \"container\" | \"text\"\u003e = {\n  DESKTOP: {\n    container: {\n      backgroundColor: \"blue\",\n    },\n    text: { fontSize: 14 },\n  },\n  MOBILE: {\n    container: { backgroundColor: \"lightblue\" },\n    text: { fontSize: 10 },\n  },\n  // if you don't want to provide a style for every single viewport,\n  // you can alternatively also provide an 'OTHER' entry, which kicks in...\n  // for all other viewports:\n  OTHER: { container: { backgroundColor: \"grey\" }, text: { fontSize: 8 } },\n};\n```\n\n## Props\n\nBesides the type parameter `V`, the `ViewportContextProvider` accepts 2 props:\n\n| prop                 | required | type                                                                 | description                                                                                                                                                                                                                                                                                                         |\n| -------------------- | -------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `viewports`          | yes      | `IViewportConfig\u003cV\u003e`                                                 | 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.                                 |\n| `getCurrentViewport` | no       | `(windowDimensions: ScaledSize, viewports: IViewportConfig\u003cV\u003e) =\u003e 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.) |\n\n## useResponsiveDimensions hook\n\nThe library also exports the internally used `useResponsiveDimensions` hook. Feel free to use it, it returns the following object:\n\n```typescript\n{\n  dimensions: ScaledSize; // \u003c-- the current width, scale, etc.\n  viewport: V; // \u003c-- the current viewport\n}\n```\n\n## If you enjoy using this...\n\n\u003ca href=\"https://www.buymeacoffee.com/maks_io\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 48px !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaks-io%2Fstylesheets-for-viewports","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaks-io%2Fstylesheets-for-viewports","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaks-io%2Fstylesheets-for-viewports/lists"}