with-mobx-store
with-mobx-store is higher order components library for performing automated MobX Provider wrapping.
Installation
npm i mobx mobx-react with-mobx-store
yarn add mobx mobx-react with-mobx-store
Concept
When you want to work with MobX store, you have to create at least two components
to work with it as the following example below.
const dataStore = const DataListContainer = <Provider dataStore=dataStore> <DataHandler /> </Provider>
I want to inject DataStore
to DataHandler
. I have to create a component for wrapping DataHandler
with Provider
. After that I have to create another component DataHandler
to inject dataStore
to it like the following code.
const DataHandler = <Fragment> dataStoredata observerDataHandler
Is it better if we don't have to create two new component just use the higher order component to wrap our target componnent?
This is why we create with-mobx-store
Usage
withStore(stores, options)
withStore
is a higher order component (HOC) that allow you to initialize component without wraping any provider.
You just simply wrap your component with withStore
, then it's worked!
Parameters
stores
- Object for mapping name of store with store object.options
- Options for modifying store lifecycle
Example
const DataHandler = <Fragment> dataStoredata observerDataHandler
withComponentStore(stores, options)
withComponentStore
is higher order component (HOC) that allow you to initialize component without wraping any provider.
Moreover, it works specifically with stores per component.
Parameters
stores
- Object for mapping name of store with store class.options
- Options for modifying store lifecycle.
Example
const DataHandler = <Fragment> dataStoredata observerDataHandler
Options
We provide some options that you can modify your stores after it is initialized.
onInitialized
onInitialized
is a function which is executed when the initialization of stores is complete.
Example
const DataHandler = <Fragment> dataStoredata observerDataHandler
onMounted
onMounted
is executed when the component is mounted.
onUnMounted
onUnMounted
is executed when the component is unmounted.
Change Log
License
(C) 2017 Wongnai Media Co, Ltd.
with-mobx-store is licensed under MIT License