react-use-mobx

React Hook to use mobx and mobx-react

Usage no npm install needed!

<script type="module">
  import reactUseMobx from 'https://cdn.skypack.dev/react-use-mobx';
</script>

README

React Use Mobx version minzipped size downloads

useObservable is a React Hook that help you use mobx and mobx-react.

useObservable use help update data automatically insteadof setState!

Install

  • npm install mobx mobx-react react-use-mobx or
  • yarn add mobx mobx-react react-use-mobx

Example

Online Demo

import React, { useState } from 'react';
import { useObservable, observer } from 'react-use-mobx';
import { render } from 'react-dom';

const App = observer(() => {
  const [ count1, setCount ] = useState({a: 1});
  /**
   * initialState must be Object!!!!!!
   */
  const count2 = useObservable({a: 1});
  return (
    <div>
    <h2>useState</h2>
    <button onClick={() => setCount({a: count1.a + 1})}>count: {count1.a}</button>
    <h2>react-use-mobx</h2>
    <button onClick={() => count2.a++}>count: {count2.a}</button>
    </div>
  );
});

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