https://github.com/oreal-solutions/react-mvvm

An npm package for implementing the MVVM pattern with react.
https://github.com/oreal-solutions/react-mvvm

mvvm react reactive-programming reactjs ui

Last synced: 9 days ago
JSON representation

An npm package for implementing the MVVM pattern with react.

• Host: GitHub
• URL: https://github.com/oreal-solutions/react-mvvm
• Owner: oreal-solutions
• License: mit
• Created: 2020-06-27T16:10:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T20:43:31.000Z (about 2 years ago)
• Last Synced: 2024-11-08T18:07:44.460Z (2 months ago)
• Topics: mvvm, react, reactive-programming, reactjs, ui
• Language: JavaScript
• Homepage:
• Size: 241 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React MVVM

![Package CI](https://github.com/oreal-solutions/react-mvvm/workflows/Package%20CI/badge.svg)

MVVM with React done the right way.

This project is inspired by the [Provider Architecture](lib/react_mvvm.js) by [FilledStacks](https://www.filledstacks.com).

## Getting started

Install the package

```bash

~$ yarn add https://github.com/oreal-solutions/react-mvvm.git

```

or if you're using npm

```bash

~$ npm install https://github.com/oreal-solutions/react-mvvm.git

```

Define your view model.

```javascript

// counter_viewmodel.js

import { BaseViewModel } from "react-mvvm";

export default class CounterViewModel extends BaseViewModel {

  constructor() {

    super(); // Required to use this

    this.counter = 0;

    this.incrementCounter = this.incrementCounter.bind(this);

  }

  incrementCounter() {

    this.counter++;

    super.notifyListeners(); // Tell the view to render, the state has changed.

  }

}

```

And finally implement your view.

```javascript

// counter_view.js

import React from "react";

import { ViewModelConsumer } from "react-mvvm";

import CounterViewModel from "./counter_viewmodel";

export default class CounterView extends ViewModelConsumer {

  constructor(props) {

    super(props, new CounterViewModel());

  }

  /**

   * Called after the model has called notifyListeners().

   *

   * @param {CounterViewModel} model

   */

  onRender(props, model) {

    return (

      


        
You have tapped the button {model.counter.toString()} times


         model.incrementCounter()}>Tap Me

      

    );

  }

}

```


You can now use your view like any React Component.

```javascript

// index.js

import CounterView from "./counter_view";

ReactDOM.render(

  

    

  ,

  document.getElementById("root")

);

```

It's that simple to write clean, reactive and well structured React Components.

### BaseViewModel

A [view model](<(lib/react_mvvm.js)>) is the state of a view. It can also have methods to manipulate that state or do other operations that affect the state of the state.

### ViewModelConsumer

The [ViewModelConsumer](<(lib/react_mvvm.js)>) class subclasses `React.Component` and displays the state of its view model. It listens for state changes from the given view model and call `React.Component.setState()` when the state has changed. Subclasses should implement `ViewModelConsumer.onRender` and not `React.Component.render` directly.

## LICENSE

This package is licensed under an MIT like license. A copy can be found in the [LICENSE](LICENSE) file that comes with this package.