# @crossroads-loyalty-solutions/react-use-browser

> A hook enabling client markup to differ from server markup when using Server-Side-Rendering

Latest version **1.0.0** (published 2019-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @crossroads-loyalty-solutions/react-use-browser
pnpm add @crossroads-loyalty-solutions/react-use-browser
yarn add @crossroads-loyalty-solutions/react-use-browser
bun add @crossroads-loyalty-solutions/react-use-browser
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-10-09 |
| First published | 2019-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Martin Wernstål |
| Maintainers | peterasplund, lokecarlsson, m4rw3r, poggen |
| Keywords | ssr, react, hook |

## Links

- npm: https://www.npmjs.com/package/@crossroads-loyalty-solutions/react-use-browser
- Repository: https://github.com/crossroads-loyalty-solutions/react-use-browser
- Issues: https://github.com/crossroads-loyalty-solutions/react-use-browser/issues
- npm.io page: https://npm.io/package/@crossroads-loyalty-solutions/react-use-browser

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-10-09

## README

# use-browser

A hook giving components the ability to render one markup on the server,
then hydrate using that markup on the client and once hydrated swap that
markup to the client markup.

This solves the issue of ReactDOM `hydrate` having issues with hydrating
server markup with the client DOM by first letting the components render
the server markup during hydration and then make them update to the client
markup once hydration has finished.

## Installation

```bash
npm i -E @crossroads-loyalty-solutions/react-use-browser
```

`rollup-plugin-node-resolve` needs to be told to load the `browser`-main
when it is building the browser bundle:

```javascript
import { resolvePlugin } from "rollup-plugin-node-resolve";

export default [
  {
    input: "src/server.js",
    plugins: [
      // ...
      resolvePlugin({
        preferBuiltins: true,
        mainFields: ["module", "main"],
      }),
      // ...
    ],
  },
  {
    input: "src/client.js",
    plugins: [
      // ...
      resolvePlugin({
        preferBuiltins: false,
        // Note the extra "browser" main-field:
        mainFields: ["browser", "module", "main"],
      }),
      // ...
    ],
  },
];
```

## Usage

```javascript
// app.js

import { useBrowser } from "@crossroads-loyalty-solutions/react-use-browser";

export const App = () => {
  const browser = useBrowser();

  if (browser) {
    return <p>This is browser markup</p>;
  }

  return <p>Server markup</p>;
};
```

```javascript
// server.js

import { renderToString } from "react-dom/server";
import { App } from "./app";

res.write(`...
<div id="app">`, "utf-8");
res.write(renderToString(<App />), "utf-8");
res.write(`</div>
...`, "utf-8");
```

```javascript
// client.js

import { hydrate } from "react-dom";
import { markHydrated } from "@crossroads-loyalty-solutions/react-use-browser";
import { App } from "./app";

const root = document.getElementById("app");

if (!root) {
  throw new Error("Missing app root");
}

hydrate(<App />, root, markHydrated);
```

## API

### `useBrowser(): boolean`

A hook returning `true` if the component is running in the browser. It will
return `false` on the server and during client-hydration.

After client-hydration it will queue a re-render with the next render returning
`true`.

### `markHydrated(): void`

`markHydrated` should be called once hydration is finished on the client to
flag that any uses of `useHydrate` should start with the client markup
immeidiately.

If this function is not called once hydration is finished on the client then
`useBrowser` will always perform a double-render as if it was hydrating in every
new component using it, first with server-markup and then with client markup.
Using `markHydrated` ensures that the client always renders client-markup
right away from that point on.

This function will throw on the server.

---
_Source: https://npm.io/package/@crossroads-loyalty-solutions/react-use-browser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._