Welcome to mobx-react-lite-context 👋

Simple MobX React Lite with Context

Install

1# yarn
2yarn add mobx-react-lite-context
3
4# npm
5npm install mobx-react-lite-context --save

Example

More example via codesandbox.io

1// index.tsx
2import React from 'react'
3import ReactDOM from 'react-dom'
4import Page from './page'
5import Store from './store'
6
7const App = () => {
8  return (
9    <Store.Provider>
10      <Page />
11    </Store.Provider>
12  );
13};
14
15ReactDOM.render(<App />, document.getElementById("root"));
16
17// page.tsx
18import React from 'react'
19import Store, { IStore } from './store'
20
21export default () => {
22  const { counter }: IStore = useStore<IStore>()
23
24  return (
25    <Store.Consumer>
26      <button onClick={() => counter.add()}>Increment {counter.value}</button>
27    </Store.Consumer>
28  )
29}
30
31// store.ts
32import { createContext } from "mobx-react-lite-context";
33import Counter, { IStore as ICounterStore } from "./counter";
34
35export interface IStore {
36  counter: ICounterStore;
37}
38
39export default createContext<IStore>({
40  counter: new Counter()
41});
42
43
44// counter.ts
45import { observable, action } from 'mobx'
46
47interface IStore {
48  value: number;
49  add(): void;
50}
51
52export default class Store implements IStore {
53  @observable value = 0;
54  @action add() {
55    this.value++;
56  }
57}

💰 Donate

Send me ETH to this address 0xab1c4e446900ad20bf5fae1be67f87d54dacd2f0

Author

👤 Ribhararnus Pracutian <oknoorap@gmail.com>

• Twitter: @oknoorap
• Github: @oknoorap

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

License

MIT © oknoorap