0.5.0 • Published 4 years ago
@nikmen/directorr-react v0.5.0
dirrector-react
React bindings for Directorr.
Installation
dirrector-react tested on React 16.8.3 or later, but maybe it works on earlier versions.
Run npm install @nikmen/directorr-react --save
or yarn add @nikmen/directorr-react --save
API
useLocalStore(class: ISomeClass)
Returns an instance of the class that will be preserved during the whole lifetime of the component.
import { createContext } from 'react';
import { useLocalStore } from 'directorr-react';
import PageStore from './PageStore';
const Page = () => {
const {
value,
} = useLocalStore(PageStore);
return (
<div>
{value}
</div>
);
};
createUseStoreHooks(context: Context)
Returns a hook that returns an instance of the class from the stores of the Director.
import { createContext } from 'react';
import { createUseStoreHooks } from 'directorr-react';
import PageStore from './PageStore';
const context = createContext(null);
const { Provider } = context;
const useStore = createUseStoreHooks(context);
const director = new Directorr();
director.addStores(PageStore);
const Page = () => {
const {
value,
} = useStore(PageStore);
return (
<div>
{value}
</div>
);
};
const app = (
<Provider value={director}>
<Page />
</Provider>
);
ReactDOM.render(app, document.getElementById('app'));
createUseTempStoreHooks(context: Context)
Returns an instance of the class that will be preserved during the whole lifetime of the component. And all the actions are dispatch to the director.
import { createContext } from 'react';
import { createUseTempStoreHooks } from 'directorr-react';
import PageStore from './PageStore';
const context = createContext(null);
const { Provider } = context;
const useTempStore = createUseTempStoreHooks(context);
const director = new Directorr();
const Page = () => {
const {
value,
} = useTempStore(PageStore);
return (
<div>
{value}
</div>
);
};
const app = (
<Provider value={director}>
<Page />
</Provider>
);
ReactDOM.render(app, document.getElementById('app'));
createHooks
Creates context and hooks.
import { createHooks } from 'directorr-react';
import PageStore from './PageStore';
const {
Provider,
useStore,
useLocalStore,
useTempStore,
} = createHooks();
const director = new Directorr();
const Page = () => {
const {
value,
} = useLocalStore(PageStore);
return (
<div>
{value}
</div>
);
};