A library that provides a hook to bind a MobX store to a React component.
yarn add use-mobx-selector
import { makeAutoObservable } from "mobx";
import { useMobxSelector } from "use-mobx-selector";
class MobxStore {
ids: string[] = []
constructor() {
makeAutoObservable(this)
}
}
const store = new MobxStore()
const Component = (props) => {
const isFooAvailable = useMobxSelector(store, (store) => store.ids.includes('foo'));
return (
<div>
{isFooAvailable}
</div>
);
};
useMobxSelector(store, selector, equalityFn?)
A hook that binds the store
to the component and re-renders the component when the result of the selector
function changes.
store
: A MobX store object.selector
: A function that takes the store as an argument and returns the selected data.equalityFn
(optional): A function that takes the previous selected data and the next selected data, and returns true if they are equal. If not provided, it will use reference equality.
The selected data returned from the selector function.
MIT.