1.0.0-rc.18 • Published 2 years ago
@nimel/directorr-react v1.0.0-rc.18
dirrector-react
Installation
dirrector-react tested on React 16.8.3 or later, but maybe it works on earlier versions.
Run npm install @nimel/directorr-react --save
or yarn add @nimel/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>
);
};
Examples
License
1.0.0-rc.18
2 years ago
1.0.0-rc.17
3 years ago
1.0.0-rc.16
3 years ago
1.0.0-rc.15
3 years ago
1.0.0-rc.13
3 years ago
1.0.0-rc.12
3 years ago
1.0.0-rc.11
3 years ago
1.0.0-rc.14
3 years ago
1.0.0-rc.10
3 years ago
1.0.0-rc.9
3 years ago
1.0.0-rc.7
4 years ago
1.0.0-rc.6
4 years ago
1.0.0-rc.5
4 years ago
1.0.0-rc.3
4 years ago
1.0.0-rc.4
4 years ago
1.0.0-rc.2
4 years ago
1.0.0-rc.1
4 years ago