# react-jpex this is just a simple context wrapper around `jpex` ## useJpex ```ts () => Jpex ``` Returns the current jpex instance. If your component is not wrapped in a `` then it will just return the global jpex instance. ```tsx const Page = () => { const jpex = useJpex(); const thing = jpex.resolve(); return (...); }; ``` ## useResolve ```ts (opts?: object) => T ``` Resolves a dependency for the given type `T`. The available options for `opts` can be found [here](https://github.com/jpex-js/jpex#jpexresolve). ```tsx const Page = () => { const thing = useResolve(); return (...); }; ``` > If you're not using typescript you can still pass in the name of the dependency: `useResolve('thing', opts)` ## useRegister ```ts (...callbacks: (jpex: Jpex) => void) => void ``` This simple hook just calls the given callback functions with the current jpex instance when the component mounts. Unlike `useEffect`, the callbacks are invoked _immediately_, meaning you can register your depndencies and then start resolving them straight away. ```ts const Page = () => { useRegister(jpex => { jpex.constant(thing); }); const thing = useResolve(); }; ``` ## Encase ```ts (...deps: any[]): (...args: any[]) => any ``` This is the same as jpex's own `encase` method, but uses the react context to use the correct jpex instance. You can encase both hooks and entire components: ```ts const useLocation = encase((window: Window) => () => window.location); ``` ```tsx const MyComponent = encase((window: Window) => () => (

{window.location.pathname}

)); ``` For more info see https://github.com/jpex-js/jpex#jpexencase ## Provider ```ts ComponentType<{ value?: Jpex, onMount?: (jpex: Jpex) => void }> ``` A provider that sets the current jpex instance for all subsequent hooks to use. ```tsx const myContainer = jpex.extend(); const App = () => ( ); ``` If you omit the `value` prop, the provider will implictly create a new jpex container from the "previous" one. You can also pass in any [configuration options](https://github.com/jpex-js/jpex#jpexextend) for the new container to use: ```tsx ``` If you there is no provider component in your app, `useJpex` will return the global `jpex` instance. The `onMount` prop allows you to access the current container and immediately register dependencies on mount. ```tsx { jpex.constant('foo'); }} > ``` You can also have multiple providers, each one will create a new container that inherits the parent one. ```tsx ```

	Stars	Issues	Version	Updated	Created
inversify-inject-decorators			3.1.0	6 years ago	8 years ago
inversify-react	141	1	1.1.0	a year ago	7 years ago
react-inversify			2.0.1	6 years ago	7 years ago
react-jpex	2	3	2.2.0	2 years ago	4 years ago

inversify-inject-decorators vs inversify-react vs react-inversify vs react-jpex

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past