https://github.com/shanamaid/react-use-mobx

React hook for MobX and Mobx React!
https://github.com/shanamaid/react-use-mobx

hook hooks mobx mobx-hook mobx-react react react-hook react-use reactjs typescript useobservable

Last synced: 5 months ago
JSON representation

React hook for MobX and Mobx React!

• Host: GitHub
• URL: https://github.com/shanamaid/react-use-mobx
• Owner: ShanaMaid
• License: mit
• Created: 2019-08-27T06:30:56.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-08-27T07:16:50.000Z (about 6 years ago)
• Last Synced: 2024-10-13T02:07:41.852Z (12 months ago)
• Topics: hook, hooks, mobx, mobx-hook, mobx-react, react, react-hook, react-use, reactjs, typescript, useobservable
• Language: TypeScript
• Size: 6.84 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Use Mobx [![version](https://img.shields.io/npm/v/react-use-mobx.svg)](https://www.npmjs.com/package/react-use-mobx) [![minzipped size](https://img.shields.io/bundlephobia/minzip/react-use-mobx.svg)](https://www.npmjs.com/package/react-use-mobx) [![downloads](https://img.shields.io/npm/dt/react-use-mobx.svg)](https://www.npmjs.com/package/react-use-mobx) 

`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](https://stackblitz.com/edit/react-tupq9h)

```javascript

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 (

    


    
useState

     setCount({a: count1.a + 1})}>count: {count1.a}

    
react-use-mobx

     count2.a++}>count: {count2.a}

    

  );

});


render(, document.getElementById('root'));

```