Skip to content
Simple MobX React Lite with Context + Hooks
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.gitignore
.npmignore
LICENSE
README.md
package.json
tsconfig.json
yarn.lock

README.md

MobX React Lite Context

Twitter: oknoorap

Simple MobX React Lite with Context

Install

# yarn
yarn add mobx mobx-react-lite mobx-react-lite-context

# npm
npm install mobx mobx-react-lite mobx-react-lite-context --save

Example

More example via codesandbox.io

// index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import Page from './page'
import Store from './store'

const App = () => {
  return (
    <Store.Provider>
      <Page />
    </Store.Provider>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

// page.tsx
import React from 'react'
import Store, { IStore } from './store'

export default () => {
  const { counter }: IStore = useStore<IStore>()

  return (
    <Store.Consumer>
      <button onClick={() => counter.add()}>Increment {counter.value}</button>
    </Store.Consumer>
  )
}

// store.ts
import { createContext } from "mobx-react-lite-context";
import Counter, { IStore as ICounterStore } from "./counter";

export interface IStore {
  counter: ICounterStore;
}

export default createContext<IStore>({
  counter: new Counter()
});


// counter.ts
import { observable, action } from 'mobx'

interface IStore {
  value: number;
  add(): void;
}

export default class Store implements IStore {
  @observable value = 0;
  @action add() {
    this.value++;
  }
}

💰 Donate

Send me ETH to this address 0xab1c4e446900ad20bf5fae1be67f87d54dacd2f0

Author

👤 Ribhararnus Pracutian <oknoorap@gmail.com>

🤝 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

You can’t perform that action at this time.