# @radio/next-mobx-wrapper

> Mobx wrapper for Next.js

Latest version **1.0.1** (published 2019-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @radio/next-mobx-wrapper
pnpm add @radio/next-mobx-wrapper
yarn add @radio/next-mobx-wrapper
bun add @radio/next-mobx-wrapper
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-08-17 |
| First published | 2019-01-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Andrew Eremenko |
| Maintainers | snusmubrik |
| Keywords | react, nextjs, mobx |

## Links

- npm: https://www.npmjs.com/package/@radio/next-mobx-wrapper
- npm.io page: https://npm.io/package/@radio/next-mobx-wrapper

## 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.1 (latest) — 2019-08-17
- 1.0.0 — 2019-01-29

## README

# next-mobx-wrapper

> Mobx wrapper for Next.js

## Features

- Simple API, easy steps to set up
- Multiple stores injection
- Works fine with [Observable Maps](https://mobx.js.org/refguide/map.html)

## Installation

To install the stable version you can use:

```sh
$ npm i next-mobx-wrapper --save
```

## Usage

### Step 1: Wrap `withMobx HOC` to `_app.js`

```js
// pages/_app.js

import ErrorPage from "next/error";
import { withMobx } from "next-mobx-wrapper";
import { configure } from "mobx";
import { Provider, useStaticRendering } from "mobx-react";

import * as getStores from "../stores";

const isServer = !process.browser;

configure({ enforceActions: "observed" });
useStaticRendering(isServer); // NOT `true` value

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (typeof Component.getInitialProps === "function") {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps, store } = this.props;
    const { statusCode } = pageProps;

    if (statusCode && statusCode >= 400) {
      return <ErrorPage statusCode={statusCode} />;
    }

    return (
      <Container>
        <Provider {...store}>
          <Component {...pageProps} />
        </Provider>
      </Container>
    );
  }
}

export default withMobx(getStores)(MyApp);
```

### Step 2: Make stores

- Create `userStore` sample:

```js
// stores/user.js

import { BaseStore, getOrCreateStore } from "next-mobx-wrapper";
import { observable, action, flow } from "mobx";
import fetch from "fetch";

class Store extends BaseStore {
  @observable userRegistry = new Map();

  fetchUser = flow(function*(id) {
    if (this.userRegistry.has(id)) {
      return;
    }

    const userPromise = yield fetch(`https://api.domain.com/users/${id}`).then(
      response => response.json()
    );
    this.userRegistry.set(id, userPromise.data.user);
  });

  getUserById = id => {
    return this.userRegistry.get(id);
  };
}

// Make sure the store’s unique name
// AND getCounterStore, counterStore must be same formula
// Example: getUserStore => userStore
// Example: getProductStore => productStore
export const getUserStore = getOrCreateStore("userStore", Store);
```

- Make the `rootStore`:

```js
// stores/index.js
// Just only simple

export { getCounterStore } from "./counter";
export { getUserStore } from "./user";
```

### Step 3: Binding data

- Any pages

```js
// pages/user.js

class User extends React.Component {
  static async getInitialProps({ store: { userStore }, query }) {
    const { id } = query;

    await userStore.fetchUser(id);

    const user = userStore.getUserById(id);

    if (!user) {
      return {
        statusCode: 404,
      };
    }

    return {
      user,
    };
  }

  render() {
    const { user } = this.props;

    console.log(user);

    return <div>Username: {user.name}</div>;
  }
}

export default User;
```

- Or any components

```js
// components/UserInfo.jsx

import {inject, observer} from 'mobx-react';

@inject(({userStore: {getUserById}}, props) => ({
  user: getUserById(props.id),
}))
class UserInfo extends React.Component {
  static propTypes = {};

  render() {
    console.log(this.props.user);

    return <div>Username: {this.props.user.name}</div>;
  }
}

// Somewhere
<SampleThing>
  <UserInfo id={9}>
</SampleThing>
```

## API

```js
import { withMobx, BaseStore, getOrCreateStore } from "next-mobx-wrapper";
```

---
_Source: https://npm.io/package/@radio/next-mobx-wrapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._