mobx-react-lite inject helper

Simple and convenient way to dependency injection

Observer work automatically

Example

Before inject:

1import { observable, makeObservable } from 'mobx';
2import { observer } from 'mobx-react-lite';
3
4class Store {
5	@observable public name: string = 'username';
6	public constructor() { makeObservable(this); }
7}
8export default observer(({message}: {message: string}) =>
9	<p>Hello {store.name}! {message}</p>
10);

After inject:

1import { observable, makeObservable } from 'mobx';
2import { createContext } from 'react';
3import inject from 'mobx-react-lite-inject';
4
5class Store {
6	@observable public name: string = 'username';
7	public constructor() { makeObservable(this); }
8}
9const StoreContext createContext<Store>({} as Store);
10
11export default inject([StoreContext], ([store], {message}: {message: string}) =>
12	<p>Hello {store.name}! {message}</p>
13);

Second store:

1export default inject(
2	[StoreContext, SecondContext],
3	([store, second], {message}: {message: string}) => ...
4);