
Security News
PodRocket Podcast: Inside the Recent npm Supply Chain Attacks
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
A MVVM pattern for React.
React-MVVM is an implementation of the Model-View-ViewModel pattern for React.
It allows you to move virtually all "code-behind" logic from your JSX
component modules, including componentDidMount
and other view functions, into
a ViewModel object. This ViewModel object is then passed as a prop to your JSX.
You can read more about MVVM on Wikipedia.
npm install react-mvvm
or yarn add react-mvvm
ViewModel.connect
, a higher-order-component that
instantiates the ViewModel and passes it to your component as props.vm
.ViewComponent.forwardEvents
(or inheriting ViewComponent
) and the ViewAware
base-ViewModel class.ViewModel
function properties. (See ViewModel-first
example below.)connect
.See the example/
directory for a full example. Summarized below.
The example below only shows one way of exposing a ViewModel to your View.
Define a view that forwards events to a ViewModel and uses the commands provided by the ViewModel.
// file: ./Dashboard.jsx
import React from 'react';
import MVVM from 'react-mvvm';
export default class Dashboard extends MVVM.ViewComponent {
render() {
return (
<div>
<h1>Dashboard</h1>
<p>
Welcome.
</p>
<button onClick={this.props.sayHello}>
Say Hello
</button>
<button onClick={this.props.sayGoodbye}>
Say Goodbye
</button>
<button onClick={this.props.vm.doSomethingElse()}>
Do Something Else
</button>
</div>
);
}
/*
constructor(props) {
super(props);
// You can also just forward events instead of inheriting ViewComponent.
ViewComponent.forwardEvents(this, props.vm);
} // */
}
Define the ViewModel.
// file: ./Dashboard.vm.js
import {
ViewModel,
ViewAware,
} from 'react-mvvm';
import Dashboard from './Dashboard';
class DashboardVM extends ViewAware {
// Functional class properties, automatically passed as view props.
sayHello = () => {
alert('Hello, my little friend.');
};
sayGoodbye = () => {
alert('Goodbye!');
};
// Prototype methods are NOT passed as view props.
componentDidMount() {
console.log('DashboardVM.componentDidMount');
}
componentDidUpdate(prevProps, prevState, prevContext) {
console.log('DashboardVM.componentDidUpdate');
}
componentWillUnmount() {
console.log('DashboardVM.componentWillUnmount');
}
// However, if you wish to call a prototype method from the view,
// the entire DashboardVM class instance is passed to the view as
// `props.vm`.
doSomethingElse() {
return () => {
alert('Doing something else...');
};
}
}
export default ViewModel.connect(
DashboardVM,
Dashboard
);
See: docs/API.md
FAQs
A MVVM pattern for React
We found that react-mvvm demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.