Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alex-cory/use-ssr
☯️ React hook to determine if you are on the server, browser, or react native
https://github.com/alex-cory/use-ssr
browser client isomorphic react react-hooks server-side server-side-rendering ssr
Last synced: 4 days ago
JSON representation
☯️ React hook to determine if you are on the server, browser, or react native
- Host: GitHub
- URL: https://github.com/alex-cory/use-ssr
- Owner: alex-cory
- License: mit
- Created: 2019-05-22T00:00:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T23:21:29.000Z (almost 2 years ago)
- Last Synced: 2025-01-01T03:06:15.952Z (11 days ago)
- Topics: browser, client, isomorphic, react, react-hooks, server-side, server-side-rendering, ssr
- Language: TypeScript
- Homepage: http://bit.ly/use-ssr
- Size: 4.82 MB
- Stars: 261
- Watchers: 5
- Forks: 7
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
- fucking-awesome-react-hooks - `use-ssr`
- awesome-react-hooks-cn - `use-ssr`
- awesome-react-hooks - `use-ssr`
- awesome-react-hooks - `use-ssr`
README
useSSR
☯️ React hook to determine if you are on the server, browser, or react native
Need 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. 🔥
[](https://codesandbox.io/s/usessr-in-nextjs-actual-epb25)
Features
--------
- SSR (server side rendering) support
- TypeScript support
- Zero dependencies
- React Native support
### Examples
- [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))
Installation
------------
```shell
yarn add use-ssr or npm i -S use-ssr
```
Usage
-----
```jsx
import useSSR from 'use-ssr'
const App = () => {
var { isBrowser, isServer, isNative } = useSSR()
// Want array destructuring? You can do that too!
var [isBrowser, isServer, isNative] = useSSR()
/*
* In your browser's chrome devtools console you should see
* > IS BROWSER: 👍
* > IS SERVER: 👎
*
* AND, in your terminal where your server is running you should see
* > IS BROWSER: 👎
* > IS SERVER: 👍
*/
console.log('IS BROWSER: ', isBrowser ? '👍' : '👎')
console.log('IS SERVER: ', isServer ? '👍' : '👎')
console.log('IS NATIVE: ', isNative ? '👍' : '👎')
return (
<>
Is in browser? {isBrowser ? '👍' : '👎'}
Is on server? {isServer ? '👍' : '👎'}
Is react native? {isNative ? '👍' : '👎'}
>
)
}
```
Options
-------
```js
const {
isBrowser,
isServer,
isNative,
device, // 'server', 'browser', or 'native'
canUseWorkers,
canUseEventListeners,
canUseViewport,
} = useSSR()
// OR
const [
isBrowser,
isServer,
isNative,
device, // 'server', 'browser', or 'native'
canUseWorkers,
canUseEventListeners,
canUseViewport,
] = useSSR()
```
### Todos
- [ ] tests for array destructuring
- [ ] set up code climate test coverage
- [ ] add typescript array return types
- [ ] optimize badges [see awesome badge list](https://github.com/boennemann/badges)
- [ ] add code climate test coverage badge
- [X] codesandbox examples
- [X] continuous integration
- [X] greenkeeper