{"id":24776790,"url":"https://github.com/iamthesiz/use-ssr","last_synced_at":"2025-04-09T14:11:31.835Z","repository":{"id":34896609,"uuid":"187930851","full_name":"iamthesiz/use-ssr","owner":"iamthesiz","description":"☯️ React hook to determine if you are on the server, browser, or react native","archived":false,"fork":false,"pushed_at":"2023-03-14T23:21:29.000Z","size":5050,"stargazers_count":262,"open_issues_count":8,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T12:08:29.185Z","etag":null,"topics":["browser","client","isomorphic","react","react-hooks","server-side","server-side-rendering","ssr"],"latest_commit_sha":null,"homepage":"http://bit.ly/use-ssr","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/iamthesiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","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}},"created_at":"2019-05-22T00:00:33.000Z","updated_at":"2025-03-05T13:55:38.000Z","dependencies_parsed_at":"2024-04-18T12:51:23.821Z","dependency_job_id":"66e6f4e4-31e3-4fe5-bbb6-36ea87f28248","html_url":"https://github.com/iamthesiz/use-ssr","commit_stats":{"total_commits":105,"total_committers":9,"mean_commits":"11.666666666666666","dds":0.5428571428571429,"last_synced_commit":"843e0c9319cb5fa7d828a44b41dc70b64c323045"},"previous_names":["iamthesiz/use-ssr","alex-cory/use-ssr"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamthesiz%2Fuse-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamthesiz%2Fuse-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamthesiz%2Fuse-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamthesiz%2Fuse-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamthesiz","download_url":"https://codeload.github.com/iamthesiz/use-ssr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054196,"owners_count":21039952,"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","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":["browser","client","isomorphic","react","react-hooks","server-side","server-side-rendering","ssr"],"created_at":"2025-01-29T07:06:57.582Z","updated_at":"2025-04-09T14:11:31.815Z","avatar_url":"https://github.com/iamthesiz.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003euseSSR\u003c/h1\u003e\n\u003cp align=\"center\"\u003e☯️ React hook to determine if you are on the server, browser, or react native\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/alex-cory/use-ssr/pulls\"\u003e\n      \u003cimg src=\"https://camo.githubusercontent.com/d4e0f63e9613ee474a7dfdc23c240b9795712c96/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d77656c636f6d652d627269676874677265656e2e737667\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/use-ssr\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/dt/use-ssr.svg\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://lgtm.com/projects/g/alex-cory/use-ssr/context:javascript\"\u003e\n      \u003cimg src=\"https://img.shields.io/lgtm/grade/javascript/g/alex-cory/use-ssr.svg?logo=lgtm\u0026logoWidth=18\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://bundlephobia.com/result?p=use-ssr\"\u003e\n      \u003cimg alt=\"undefined\" src=\"https://img.shields.io/bundlephobia/minzip/use-ssr.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://greenkeeper.io/\"\u003e\n      \u003cimg src=\"https://badges.greenkeeper.io/alex-cory/use-ssr.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/alex-cory/use-ssr/blob/master/license.md\"\u003e\n      \u003cimg alt=\"undefined\" src=\"https://img.shields.io/github/license/alex-cory/use-ssr.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://codeclimate.com/github/alex-cory/use-ssr/maintainability\"\u003e\n      \u003cimg src=\"https://api.codeclimate.com/v1/badges/e661bf6aa5e4d64502c6/maintainability\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://snyk.io/test/github/alex-cory/use-ssr?targetFile=package.json\"\u003e\n      \u003cimg src=\"https://snyk.io/test/github/alex-cory/use-ssr/badge.svg?targetFile=package.json\" alt=\"Known Vulnerabilities\" data-canonical-src=\"https://snyk.io/test/github/alex-cory/use-ssr?targetFile=package.json\" style=\"max-width:100%;\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/use-ssr\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/use-ssr.svg\" alt=\"Known Vulnerabilities\" data-canonical-src=\"https://snyk.io/test/github/alex-cory/use-ssr?targetFile=package.json\" style=\"max-width:100%;\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://circleci.com/gh/alex-cory/use-ssr\"\u003e\n      \u003cimg src=\"https://img.shields.io/circleci/project/github/alex-cory/use-ssr/master.svg\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nNeed to know when you're *on the server*, *in the browser* or in *react native* in your components/hooks? This simple hook makes it easy. 🔥\n\n[![](./useSSR.png)](https://codesandbox.io/s/usessr-in-nextjs-actual-epb25)\n\nFeatures\n--------\n- SSR (server side rendering) support\n- TypeScript support\n- Zero dependencies\n- React Native support\n\n### Examples\n- [Example - Next.js - codesandbox container](https://codesandbox.io/s/usessr-in-nextjs-actual-epb25) (sometimes containers are buggy, if so try [this example](https://codesandbox.io/s/usessr-in-nextjs-4gy7v))\n\nInstallation\n------------\n\n```shell\nyarn add use-ssr      or     npm i -S use-ssr\n```\n\nUsage\n-----\n\n```jsx\nimport useSSR from 'use-ssr'\n\nconst App = () =\u003e {\n  var { isBrowser, isServer, isNative } = useSSR()\n  \n  // Want array destructuring? You can do that too!\n  var [isBrowser, isServer, isNative] = useSSR()\n  \n  /*\n   * In your browser's chrome devtools console you should see\n   * \u003e IS BROWSER: 👍\n   * \u003e IS SERVER: 👎\n   *\n   * AND, in your terminal where your server is running you should see\n   * \u003e IS BROWSER: 👎\n   * \u003e IS SERVER: 👍\n   */\n  console.log('IS BROWSER: ', isBrowser ? '👍' : '👎')\n  console.log('IS SERVER: ', isServer ? '👍' : '👎')\n  console.log('IS NATIVE: ', isNative ? '👍' : '👎')\n  return (\n    \u003c\u003e\n      Is in browser? {isBrowser ? '👍' : '👎'}\n      \u003cbr /\u003e\n      Is on server? {isServer ? '👍' : '👎'}\n      \u003cbr /\u003e\n      Is react native? {isNative ? '👍' : '👎'}\n    \u003c/\u003e\n  )\n}\n```\n\nOptions\n-------\n\n```js\nconst {\n  isBrowser,\n  isServer,\n  isNative,\n  device, // 'server', 'browser', or 'native'\n  canUseWorkers,\n  canUseEventListeners,\n  canUseViewport,\n} = useSSR()\n// OR\nconst [\n  isBrowser,\n  isServer,\n  isNative,\n  device, // 'server', 'browser', or 'native'\n  canUseWorkers,\n  canUseEventListeners,\n  canUseViewport,\n] = useSSR()\n```\n\n\u003c!--\nWho Uses useSSR?\n---------------\n\n\u003cp align=\"center\"\u003e\n  \u003cimg height=\"140px\" src=\"https://user-images.githubusercontent.com/5455859/106836083-55077880-664d-11eb-95a4-d317f06b2f36.png\" /\u003e\n\u003c/p\u003e\n--\u003e\n\n### Todos\n- [ ] tests for array destructuring\n- [ ] set up code climate test coverage\n- [ ] add typescript array return types\n- [ ] optimize badges [see awesome badge list](https://github.com/boennemann/badges)\n  - [ ] add code climate test coverage badge\n- [X] codesandbox examples\n- [X] continuous integration\n- [X] greenkeeper\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamthesiz%2Fuse-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamthesiz%2Fuse-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamthesiz%2Fuse-ssr/lists"}