├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
├── src
├── Hello.tsx
├── index.tsx
├── ioc.react.tsx
├── ioc.ts
├── providers.ts
└── react-app-env.d.ts
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Example of using InversifyJS in React with Hooks and Context API.
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-hooks-with-inversify",
3 | "version": "0.1.1",
4 | "private": true,
5 | "dependencies": {
6 | "@types/jest": "25.2.1",
7 | "@types/node": "13.13.5",
8 | "@types/react": "16.9.35",
9 | "@types/react-dom": "16.9.8",
10 | "inversify": "5.0.1",
11 | "react": "16.13.1",
12 | "react-dom": "16.13.1",
13 | "react-scripts": "3.4.1",
14 | "reflect-metadata": "0.1.13",
15 | "typescript": "3.8.3"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "eslintConfig": {
24 | "extends": "react-app"
25 | },
26 | "browserslist": {
27 | "production": [
28 | ">0.2%",
29 | "not dead",
30 | "not op_mini all"
31 | ],
32 | "development": [
33 | "last 1 chrome version",
34 | "last 1 firefox version",
35 | "last 1 safari version"
36 | ]
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tswistak/react-hooks-with-inversify/795e1ddcc9e9cf59a820c8c1e0447fcab657f754/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
22 | React App
23 |
24 |
25 |
26 |
27 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/Hello.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useInjection } from './ioc.react';
3 | import { IProvider } from './providers';
4 |
5 | export const Hello: React.FC = () => {
6 | const provider = useInjection>('nameProvider');
7 |
8 | return (
9 | Hello {provider.provide()}!
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import 'reflect-metadata';
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | import { Hello } from './Hello';
5 | import { container } from './ioc';
6 | import { Provider } from './ioc.react';
7 |
8 | const App: React.FC = () => {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | );
16 | };
17 |
18 | ReactDOM.render(, document.getElementById('root'));
--------------------------------------------------------------------------------
/src/ioc.react.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import { Container, interfaces } from 'inversify';
3 |
4 | const InversifyContext = React.createContext<{ container: Container | null }>({ container: null });
5 |
6 | type Props = {
7 | container: Container;
8 | };
9 |
10 | export const Provider: React.FC = (props) => {
11 | return (
12 |
13 | {props.children}
14 |
15 | );
16 | };
17 |
18 | export function useInjection(identifier: interfaces.ServiceIdentifier) {
19 | const { container } = useContext(InversifyContext);
20 | if (!container) { throw new Error(); }
21 | return container.get(identifier);
22 | };
--------------------------------------------------------------------------------
/src/ioc.ts:
--------------------------------------------------------------------------------
1 | import { Container } from 'inversify';
2 | import { IProvider, NameProvider } from './providers';
3 |
4 | export const container = new Container();
5 | container.bind>('nameProvider').to(NameProvider);
--------------------------------------------------------------------------------
/src/providers.ts:
--------------------------------------------------------------------------------
1 | import { injectable } from 'inversify';
2 |
3 | export interface IProvider {
4 | provide(): T;
5 | }
6 |
7 | @injectable()
8 | export class NameProvider implements IProvider {
9 | provide() {
10 | return 'World';
11 | }
12 | }
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "noEmit": true,
20 | "jsx": "preserve",
21 | "experimentalDecorators": true
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------