README

mobx-store-provider

Package size MIT License

mobx-store-provider is a library that provides React Hooks to setup and access mobx-state-tree models from within React Function Components.

Its goal is to provide a straight-forward, minimalist, and terse API that allows you to easily incorporate mobx-state-tree into functional React components.

Installation
Basic example
API details and examples
- useProvider - Provide your components with a store
- useCreateStore - Create a new store inside a component
- useStore - Use a store in a component
- getStore - Use a store outside a component
Multiple stores
Local state
Typescript
Testing
Motivation
Upgrading 1.x -> 2.x

Installation

npm i mobx-store-provider

yarn add mobx-store-provider

Basic example

The following shows an example application using mobx-store-provider.

App component

At the core of the application we define the main App component.

Inside of the App we use hooks provided by mobx-store-provider to:

Create the appStore instance with the useCreateStore hook
Retrieve the Provider with the useProvider hook

// App.jsx (Main App component, we use it to create and provide the store)
import React from "react";
import { useProvider, useCreateStore } from "mobx-store-provider";
import AppStore from "./AppStore";
import UserDisplay from "./UserDisplay";

function App() {
  // Create the AppStore instance
  const appStore = useCreateStore(AppStore, { user: "Jonathan" });

  // Get the Provider for the AppStore
  const Provider = useProvider(AppStore);

  // Wrap the application with the Provider passing it the appStore
  return (
    <Provider value={appStore}>
      <UserDisplay />
    </Provider>
  );
}

export default App;

Note that we wrap the application with the Provider, supplying it the appStore as its value.

This makes the appStore available to the rest of the application.

Using the store

In another component somewhere in the application we want to use or gain access to the appStore.

To do this, we use the useStore hook:

// UserDisplay.jsx (A component, we use the store from above inside it)
import React from "react";
import { observer } from "mobx-react";
import { useStore } from "mobx-store-provider";
import AppStore from "./AppStore";

function UserDisplay() {
  // Get access to the store
  const appStore = useStore(AppStore);
  return <div>{appStore.user}</div>;
}

// Wrap it with mobx-react observer(), so updates get rendered
export default observer(UserDisplay);

Note that we also wrap the component with observer() from the mobx-react library.

This is critical, as it ensures the component will render any updates made to the appStore. For more information, see the observer documentation for the mobx-react library.

Defining the store

The code above uses the AppStore mobx-state-tree model. In the context of mobx-store-provider this is referred to as a store.

// AppStore.js (mobx-state-tree store/model)
import { types } from "mobx-state-tree";

const AppStore = types.model({
  user: types.string,
});

export default AppStore;

If you are new to mobx-state-tree, it is recommended you read through the mobx-state-tree documentation.

See the full docs

Usage no npm install needed!