Get started with mobx-react CDN

MIT licensed

MobX-React is a library that integrates MobX state management with React components, allowing real-time, reactive component rendering based on observable state.

Tags:
  • mobx
  • mobservable
  • react-component
  • react
  • reactjs
  • reactive

Stable version

Copied!

How to start using mobx-react CDN


import React from 'react';
import { observer, inject } from 'mobx-react';
import { observable } from 'mobx';

// Create a simple store
class CounterStore {
  @observable count = 0;

  increment = () => {
    this.count++;
  };
}

const counterStore = new CounterStore();

// Wrap your component in an observer to react to store changes
@observer
class Counter extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.props.counterStore.increment()}>
          Click me!
        </button>
        <p>Count: {this.props.counterStore.count}</p>
      </div>
    );
  }
}

// Use inject to provide the store to your component
@inject('counterStore')
class App extends React.Component {
  render() {
    return <Counter counterStore={this.props.counterStore} />;
  }
}

// Render the app
export default App;
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions