React is an awesome library. "React MVVM Component" make its state management better.
Frustrated with complex local state flow or debugging hooks and effects in components?
React MVVM Component = React Function Component + MVVM Options API
Using this new hook plugin, you can manage "in-component state" more clearly and intuitively.
Lightweight 6KB, supports React 17–19 and the essence of Function Components remains unchanged.
Seamlessly compatible with native components, existing projects and React ecosystem !
The "MVVM pattern" has demonstrated long-term reliability in frontend development, just as the "MVC pattern" has proven its reliability across various ecosystems such as C#, PHP and Java.
So, when we were working on some complex React components, it looked like a good thing to do.
This React MVVM component hook provides Separation of Concerns (SoC) by using finer-grained control boundaries api for better extensibility and maintainability.
MVVM component is not intended to replace existing tools, but rather to extend their functionality with a complementary architectural pattern that may be more suitable in certain scenarios.
Therefore, the MVVM component is still a function component, so you can use it directly in your existing project.
It works seamlessly with other function components, please refer to demo: Entitly, Parent-Child, and Example8_1's original syntax for more information.
npm install @gratefuljs/react-mvvm-component
or
pnpm install @gratefuljs/react-mvvm-component
Built on React, this plugin is easy to set up — just plug it into your project and enjoy the extended functionality:
import ReactDOM from 'react-dom/client';
import React from 'react';
import { useRespectVue } from '@gratefuljs/react-mvvm-component';
const App = ()=>{ // The MVVM component is still a React function component
const [MVVMComponent, VMmethodsAPI] = useRespectVue(React, {
view : ({$VM, methods, refDOM}) => (
<div>
<p>Count: { $VM('count') }</p>
<button onClick={methods.plus}>+</button>
<button onClick={methods.minus}>-</button>
</div>),
methods : ({$VM, getMethods, memoBox, $DOM, nextTick}) => ({
plus : function(){
const cnt = $VM('count');
cnt.val( cnt.now()+1 );
},
minus : function(){
const cnt = $VM('count');
cnt.val( cnt.now()-1 );
},
}),
data : {
count: 0,
},
});
return (<>{MVVMComponent}</>);
};
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<React.StrictMode>
<App />
</React.StrictMode>);If you discover a bug or security vulnerability, please report it by opening an issue or contacting us directly.
Your help in improving this project is greatly appreciated!
If possible, please include a detailed description of the error along with screenshots or screen recordings. It would also be very helpful if you can provide a reproducible example using CodePen, JSFiddle, JSBin, or similar tools. Thank you.
No other contact methods are available apart from those listed above.
This project is partially open-source. It is free to use and can be used for commercial purposes.
For more details, please refer to the licensing terms below.
This project is dedicated to developing this package for free.
However, your donations 
If you can spare the cost of a cup of coffee, it would make a big difference and directly support the long-term development of this project. Thank you!