Skip to content

Migrate 'Integrating with MobX State Tree' examples to v7 #1311

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 23, 2024
Merged

Migrate 'Integrating with MobX State Tree' examples to v7 #1311

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions versioned_docs/version-7.x/MST-integration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ title: Integrating with MobX State Tree
sidebar_label: MobX State Tree integration
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

:::note

This guide is incomplete. Please help improve this by sending pull requests.
Expand Down Expand Up @@ -32,12 +35,27 @@ At this point, you're probably wondering how to connect your MST objects with th

Use `Provider` to wrap what you return from your root component's render method:

<Tabs groupId="config" queryString="config">
<TabItem value="static" label="Static" default>

```js
<Provider myObject={this.myObject}>
<Navigation />
</Provider>
```

</TabItem>
<TabItem value="dynamic" label="Dynamic" default>

```js
<Provider myObject={this.myObject}>
<NavigationContainer>{/* Screen configuration */}</NavigationContainer>
</Provider>
```

</TabItem>
</Tabs>

this will allow you to access `myObject` from any React component in the application through the `inject` function which can be quite useful.

Use `observer` function to wrap all components that render observable data. This will make sure the components re-render once the data they render changes.
Expand Down