https://github.com/wellguimaraes/mobx-react-typed-injection

A better, strongly typed stores injector HOC to use with MobX and React.
https://github.com/wellguimaraes/mobx-react-typed-injection

Last synced: 12 days ago
JSON representation

A better, strongly typed stores injector HOC to use with MobX and React.

• Host: GitHub
• URL: https://github.com/wellguimaraes/mobx-react-typed-injection
• Owner: wellguimaraes
• Created: 2020-02-09T23:38:18.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-10-21T18:02:37.000Z (about 4 years ago)
• Last Synced: 2024-09-16T09:27:38.974Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 16.6 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MobX React Typed Injection

A better, fully typed injector HOC to use with MobX and React.

## !!! Deprecated !!!

This package is deprecated in favor of using MobX with hooks instead.

## Benefits

- The inject function "knows" your stores, so you'll have proper TS code completion and warnings for non-matching types

- Build time errors when trying to use props that are already injected

- No need to add one more context provider to your app root

## Install it

```

yarn add mobx-react-typed-injection

```

### Use it

1. Somewhere in your project, create a `stores.ts` file, exporting `inject` and `withFakeStores` (to be used on tests):

   ```typescript

   import { createStateManager } from 'mobx-react-typed-injection'

   import search from 'path/to/searchStore'

   import movieDetails from 'path/to/movieDetailsStore'

   import somethingElse from 'path/to/somethingElseStore'

   export const { inject, withFakeStores } = createStateManager({

     search,

     movieDetails,

     somethingElse,

   })

   ```

2. Inject something from the stores into a dumb component:

   ```typescript jsx

   import { inject } from 'path/to/stores'

   const _MovieHeader = (props: { title: string; releaseYear: number; poster: string; somethingElse: string }) => {

     return (

       


         

         
{props.title}

         
{props.releaseYear}

       

     )

   }


   export const MovieHeader = inject(({ movieDetails }) => ({

     title: movieDetails.title,

     releaseYear: movieDetails.releaseYear,

     poster: movieDetails.posters[0],

   }), _MovieHeader)

   ```

3. Use your injected component:

   ```typescript jsx

   // Works fine for non injected props

   

   // TS error for props already injected

   

   ```