Lightweight and opinionated mvvm glue/helper code for React/Inversify.
Motivation
For projects that embrace a MVVM pattern you usually end up writing some glue code to connect your React Components with the designated ViewModel.
This micro-library helps to reduce the aforementioned glue code by trying to make it as easy as possible to connect the two worlds.
Dependencies
This library is using inversify as a way to resolve/instantiate the view models, making it a hard dependency. If that is not your taste, feel free to just take the parts you like 😉
Installation
yarn add inversify-react-mvvm# or npm install inversify-react-mvvm
Usage
The ViewModel
All view models have to extend ViewModel
. You don't have to implement any of the following methods though, these are for demonstration purposes.
provideByClass
is an extension to provide
from inversify-inject-decorators allowing you to register the decorated class by class reference in inversify
. It is not a requirement to do it like that, you can also register your view models explicitely in your container.
You can use provideByClass
not only for ViewModels, but also for your services/etc.
⚠️ provideByClass
registeres the view models as Singleton
.
// ExampleViewModel.tsx;;;;
The (consumer) component
// Example.tsx;; ;
The configuration
// App.tsx (or alike);;;; ;// registers all bindings from inversify-inject-decoratorscontainer.loadbuildProviderModule