Thinjector (React)

Minimalistic, super lightweight React service injection container extremely easy to use.

Why

It's important to decouple your ui components from your services (fetching logic, biz logic, etc..) but the solutions out there are either using heavy weight state management tools (redux + redux saga, mobx, recoil, etc..) or full fledge dependency containers (inversifyjs, tsyringe) which for a lot of use cases are overkill so looking for lightweight solutions the ones I found which are awesome but didn't feel comfortable with the api, so I came with this very small solution.

Features

• Built with Typescript.
• A hook for accessing services.

Installation

1npm install thinjector

Usage

Set up your service container, create the file where you wish in your project folder structure, I will put it on services/index.ts.

1import { createServiceContainer } from 'thinjector'
2
3// Service structure is up to you, this is just a simple example
4interface UserService {
5    login: VoidFunction
6}
7export interface IServices {
8    userService: UserService
9}
10
11const services: IServices = {
12    userService: {
13        login: () => console.log('signing in....'),
14    }
15}
16
17export const container =
18  createServiceContainer<IServices>(services);

And now lets configure the service container provider at the root of your React app, normally App.tsx

1import React from "react"
2import container from "./services"
3
4const { ServiceProvider } = container;
5
6const App = () => {
7  return (
8    <ServiceProvider>
9      {/* Your app.... */}
10    </ServiceProvider>
11  );
12};
13
14export default App;

And ... that's it, you can start accessing your services any part down the tree !.

Injecting services examples

Using useService hook !

1import React from "react"
2import container from "./services"
3
4const { useService } = container;
5
6const DemoPage = () => {
7  const { userService } = useService(); // WoW, just like that
8  return (
9    <div onClick={() => userService.login()}>
10      Demo Page
11    </div>
12  );
13};
14
15export default DemoPage;

Not a hook fan ? still using class components ?, don't worry, we got you covered with a HOC too !

Using withService HOC !

1import React from "react"
2import container, {IServices} from "./services"
3
4const { withService } = container;
5
6type Props = {
7    service: IServices
8}
9const DemoPage = ({service}: Props) => {
10  return (
11    <div onClick={() => service.userService.login()}>
12      Demo Page
13    </div>
14  );
15};
16
17export default withService(DemoPage);

Don't like the idea of injecting all services and prefer a solution to specify which services or functions you want like a redux mapToProps thing ? don't say no more:

Using inject HOC !

1import React from "react"
2import container, {IServices} from "./services"
3
4const { inject } = container;
5
6type Props = {
7    login: IServices['userService']['login']
8}
9const DemoPage = ({login}: Props) => {
10  return (
11    <div onClick={() => login()}>
12      Demo Page
13    </div>
14  );
15};
16
17export default inject(DemoPage, (services) => ({
18    login: services.userService.login
19}));