# @before.js/client

> Enables data fetching with any React SSR app that uses React Router 5

Latest version **4.1.13** (published 2020-12-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @before.js/client
pnpm add @before.js/client
yarn add @before.js/client
bun add @before.js/client
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.13 |
| Published | 2020-12-13 |
| First published | 2019-05-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 407.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Flybondi |
| Maintainers | lfantone, flybondi-nelson |
| Keywords | react, react ssr, react-router, before, async |

## Links

- npm: https://www.npmjs.com/package/@before.js/client
- npm.io page: https://npm.io/package/@before.js/client

## Dependencies (2)

- [ramda](https://npm.io/package/ramda.md) ^0.27.0
- [query-string](https://npm.io/package/query-string.md) ^6.12.1

## 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

- 4.1.13 (latest) — 2020-12-13
- 4.0.0-development (next) — 2019-05-29
- 4.1.12 — 2020-09-17
- 4.1.11 — 2020-05-30
- 4.1.10 — 2020-05-29
- 4.1.9 — 2020-05-29
- 4.1.8 — 2020-05-29
- 4.1.7 — 2020-05-29
- 4.1.5 — 2020-05-29
- 4.1.2 — 2019-12-16
- 4.1.0 — 2019-10-07
- 4.0.2 — 2019-05-29
- 4.0.1 — 2019-05-29
- 5.0.0-development.0 — 2019-05-29
- 0.0.4-development — 2019-05-29
- … 5 more at https://npm.io/package/@before.js/client/versions

## README

# @before/client

[![js-flybondi](https://img.shields.io/badge/flybondi-fdbe15.svg?logo=javascript&style=flat-square&logoColor=grey&logoWidth=20)](https://flybondi.com)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square)](https://github.com/Flet/semistandard)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

```sh
yarn add @before/client
yarn add @loadable/component react react-dom react-router-dom
```

## Basic usage

```js
// ./src/routes.js
import { asyncComponent } from '@before/client';
import loadable from '@loadable/component';

const Placeholder = () => <div>Loading</div>;

const HomeContainerLoader = /* #__LOADABLE__ */ () =>
  import(/* webpackChunkName: "home" */ './pages/HomeContainer/HomeContainer.page');

const routes = [
  {
    path: '/',
    exact: true,
    component: asyncComponent({
      LoadableComponent: loadable(HomeContainerLoader, { fallback: Placeholder }),
      loader: HomeContainerLoader
    })
  }
];

export default routes;
```

```jsx
// ./src/client.js
import React from 'react';
import routes from './routes';
import { hydrate } from 'react-dom';
import { ensureReady, ensureClientReady, Before } from '@before/client';

ensureClientReady(() =>
  ensureReady(routes)
    .then(data => {
      hydrate(
        <BrowserRouter>
          <Before data={data} routes={routes} />
        </BrowserRouter>,
        document.getElementById('root')
      );
    })
  }
);
```

```jsx
// ./pages/HomeContainer/HomeContainer.page'
import React, { useCallback } from 'react';

function HomePage({ history, location }) {
  const handleClick = useCallback(() => {
    history.push('/search/page');
  }, [history]);

  return (
    <main>
      <header>
        <h1>Home Page</h1>
      </header>
      <article>
        <section>
          <p>Hello actual pathname is {location.pathname}</p>
        </section>
        <a href="" onClick={handleClick}>Go to next page</a>
      </article>
    </main>
  );
}
```
## Page props

Before will pass down the following props to your component plus all your component initial props:

| Name | Description |
|--|--|
| history | Copy of [react-router history](https://github.com/ReactTraining/history) but with custom `push`, `replace` and `location` properties. The original properties can we access with the `unstable_` prefix. |
| query | Object with the querystring value from the `location` object if we are in the client or from the _request query_ if we are in the server. |
| match | A match object contains information about how a <Route path> matched the URL. [More info](https://reacttraining.com/react-router/web/api/match) |
| location | A location object shaped like `{ pathname, search, hash, state }` |

---
_Source: https://npm.io/package/@before.js/client · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._