# mobx-react-inject

> Implementation of store injection to react component with mobx, typescript and decorator metadata

Latest version **0.0.3** (published 2017-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install mobx-react-inject
pnpm add mobx-react-inject
yarn add mobx-react-inject
bun add mobx-react-inject
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2017-04-04 |
| First published | 2017-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pavel Sokolov |
| Maintainers | mass3ff3ct |
| Keywords | mobx, typescript, di, inject, react, reactjs |

## Links

- npm: https://www.npmjs.com/package/mobx-react-inject
- npm.io page: https://npm.io/package/mobx-react-inject

## Alternatives

- [memory-cache](https://npm.io/package/memory-cache.md) — 795.0K weekly downloads
- [@httptoolkit/proxy-agent](https://npm.io/package/@httptoolkit/proxy-agent.md) — 11.2K weekly downloads
- [express-cache-controller](https://npm.io/package/express-cache-controller.md) — 5.3K weekly downloads
- [http-cache-middleware](https://npm.io/package/http-cache-middleware.md) — 4.5K weekly downloads
- [cache2](https://npm.io/package/cache2.md) — 1.5K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2017-04-04
- 0.0.2 — 2017-02-05
- 0.0.1 — 2017-02-05

## README

# mobx-react-inject
Implementation of store injection to react component with mobx, typescript and decorator metadata

## Installation
```bash
npm i --save mobx-react-inject reflect-metadata 
```

## Preparations
```json
//tsconfig.json
{
   "compilerOptions": {
      //...
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      //...
  }
}
```
```ts
//your-main-index.ts
import "reflect-metadata"
```
## Usage
### Create store provider
```ts
import {StoreProvider} from "mobx-react-inject"

class App extends React.Component<{}, void> {
  
  render() {
    return <StoreProvider>
        ...
    </StoreProvider>
  }
}
```
### Inject your store to component
```ts
class MyStore {
  public hello() {
    return "Hello"
  }
}
// ----
import {inject} from "mobx-react-inject"
class MyComponent extends React.Component<{}, void> {
  
  @inject
  private myStore: MyStore
  
  render() {
    return <span>{this.myStore.hello()}</span>
  }
}
```
### Store-to-store injection
```ts
class MyStoreDep {
  public word() {
    return "word"
  }  
}
class MyStore {
  
  constructor(@inject private myStoreDep: MyStoreDep)
  
  public hello() {
    return `Hello ${this.myStoreDep.word()}` 
  }
}
```
### Nested store providers
```ts

import {StoreConstructor, StoreInstance} from "mobx-react-inject"

class App extends React.Component<{}, void> {
  
  private stores: Map<StoreConstructor, StoreInstance>
  
  componentWillMount() {
    this.stores = new Map([
      [MyStore, new MyStore()]
    ])
  }
  
  render() {
    return <StoreProvider stores={this.stores}>
      <StoreProvider>
         ...
      </StoreProvider>
    </StoreProvider>
  }
}
```

---
_Source: https://npm.io/package/mobx-react-inject · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._