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 !
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.
If you find this package helpful in your React projects,
please consider supporting it by making a donation 
Your support helps keep the project going. Thank you!