mobx-store-provider


!Typescript
!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.

1. Installation
1. Basic example
1. 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
1. Multiple stores
1. Local state
1. Typescript
1. Testing
1. Motivation
1. Upgrading 1.x -> 2.x

---

Installation

``bash
npm i mobx-store-provider
`

`bash
yarn add mobx-store-provider
`

Basic example

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

$3

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:

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

`javascript
// 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 (



);
}

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.

$3

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:

`javascript
// 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

// 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.

$3

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

`javascript
// 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