open-index/open-npm huggingface dataset:
npm package: @nimel/directorr-appinitializer
Description: Simplification of the application initialization process
Author: Nikita Melnikov
Latest version: 1.0.0-rc.18

# directorr-appinitializer

>Simplification of the application initialization process for [Directorr](https://github.com/nikitaMe1nikov/directorr-repository/tree/master/packages/directorr)

## Installation

Run `npm install @nimel/directorr-appinitializer --save` or `yarn add @nimel/directorr-appinitializer`
npm package: @nimel/directorr-appinitializer-react
Description: Simplification of the application initialization process for Reactjs
Author: Nikita Melnikov
Latest version: 1.0.0-rc.18

# directorr-appinitializer-react

>Simplification of the application initialization process for [React](https://github.com/facebook/react).

## Installation

Run `npm install @nimel/directorr-appinitializer-react --save` or `yarn add @nimel/directorr-appinitializer-react`
npm package: @nimel/directorr-middlewares
Description: middlewares for directorr
Author: Nikita Melnikov
Latest version: 1.0.0-rc.18

# directorr-middlewares

Middlewares for Directorr.  

## Installation

Run `npm install @nimel/directorr-middlewares --save` or `yarn add @nimel/directorr-middlewares`

## License

[MIT](LICENSE)
npm package: @nimel/directorr-next
Description: Nextjs binding for directorr
Author: Nikita Melnikov
Latest version: 1.0.0-rc.18

# directorr-next

> Directorr HOC for Next.js

## Installation

Run `npm install @nimel/directorr-next --save` or `yarn add @nimel/directorr-next`

## API

### nextWithDirectorr(ReactComponent)

Commonly used in _app.js

```javascript
import createSagaMiddleware from 'redux-saga';
import App from 'next/app';
import nextWithDirectorr, { MakeDirectorr, IWithDirectorrAppProps } from '@nimel/directorr-next';

export const makeDirectorr: MakeDirectorr = (ctx, initialState?: IDirectorrStoresState) => {
  const sagaMiddleware = createSagaMiddleware();
  const logMiddleware = createLogMiddleware();
  const directorr = new Directorr();

  directorr.addInitState(initialState);

  directorr.addReduxMiddlewares(logMiddleware, sagaMiddleware);
  sagaMiddleware.run(sagas);

  return directorr;
};

class CustomApp extends App<IWithDirectorrAppProps> {
  render() {
    const { Component } = this.props;

    return (
      <>
        <Head>
          <title>aggregion-test</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <Component />
      </>
    );
  }
}

export default nextWithDirectorr(makeDirectorr)(CustomApp);
```

And in some page file

```javascript
import { useTempStore } from '@nimel/directorr-react';
import { IDirectorr } from '@nimel/directorr';
import { observer } from 'mobx-react-lite';
import AppStore from 'stores/AppStore';

function ListItem({ job }) {
  return <li>{`${job.title}`}</li>;
}

function App() {
  const { somedata } = useTempStore(AppStore);
  return (
    <div>
      {somedata}
    </div>
  );
}

App.whenLoadDirectorr = async (directorr: IDirectorr) => {
  directorr.addStores(AppStore);
};

export default observer(App);
```

## License

[MIT](LICENSE)
npm package: @nimel/directorr-react
Description: Reactjs binding for directorr
Author: Nikita Melnikov
Latest version: 1.0.0-rc.18

# dirrector-react

[React](https://github.com/facebook/react) bindings for [Directorr](https://github.com/nikitaMe1nikov/directorr-repository/tree/master/packages/directorr).  

## 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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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

- [**ToDoExample**](https://github.com/nikitaMe1nikov/directorr-todo-example)

## License

[MIT](LICENSE)
npm package: @nimel/directorr-router
Description: Router store for directorr
Author: Nikita Melnikov
Latest version: 1.0.0-rc.18

# directorr-router

>Router for [Directorr](https://github.com/nikitaMe1nikov/directorr-repository/tree/master/packages/directorr).

## Installation

Run `npm install @nimel/directorr-router --save` or `yarn add @nimel/directorr-router`
npm package: @nimel/directorr-router-react
Description: Router for Reactjs using directorr
Author: Nikita Melnikov
Latest version: 1.0.0-rc.18

# directorr-router-react

>Directorr router bindings for [React](https://github.com/facebook/react).

## Installation

Run `npm install @nimel/directorr-router-react --save` or `yarn add @nimel/directorr-router-react`