roviriyadi/react-mvp

Lightweight Model-View-Presenter framework for React.

react-mvp

Lightweight Model-View-Presenter framework for React.

Bootstrapped with create-react-app-minimal.

Getting started

Installing

npm install react-mvp

Usage

Declare your view, as a "dumb" component, with all input and output taking place through props (values and event handlers).

import React from 'react'

class TodoApp extends Component {
  render = () => {
    const { todoList, newItem, onAddNewItem, onChangeNewItem } = this.props

    return <div>
      <div>
        <label>Enter new item</label>
        <input type="text" onChange={onChangeNewItem} value={newItem} />
        <button onClick={onAddNewItem}>Add</button>
      </div>

      <ul>
        {todoList.map(item =>
          <li>{item}</li>
        )}
      </ul>
    </div>
  }
}

Then declare your model, with any needed defaults.

class TodoAppModel {
  todoList = []

  newItem = ''
}

Then declare your presenter, as a class that inherits from Presenter in react-mvp.

import { Presenter } from 'react-mvp'

class TodoAppPresenter extends Presenter {
  constructor(model, setModel) {
    super(model, setModel);
  }

  onChangeNewItem = event =>
    this.setModel({
      newItem: event.target.value
    })

  onAddNewItem = () =>
    this.setModel({
      newItem: '',
      todoList: this.model.todoList.concat([ this.model.newItem ])
    })
}

Finally, hook them all up together, using connect, and render the result. (This example assumes a web-browser.)

import { connect } from 'react-mvp'

const App = connect(TodoAppModel, TodoAppPresenter, TodoApp)

import React from 'react'
import ReactDOM from 'react-dom'

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

Contributing

You're welcome to fork and/or contribute pull-requests and issues to the project.

Cloning and installing

git clone https://github.com/jonathanconway/react-mvp
cd react-mvp
npm install

Running tests

npm test