Gathering detailed insights and metrics for thinjector
Gathering detailed insights and metrics for thinjector
npm install thinjector
Typescript
Module System
Min. Node Version
68.1
Supply Chain
98.8
Quality
75.3
Maintenance
100
Vulnerability
100
License
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
1,324
Last Day
1
Last Week
2
Last Month
19
Last Year
102
Minified
Minified + Gzipped
Latest Version
1.0.4
Package Id
thinjector@1.0.4
Unpacked Size
24.74 kB
Size
6.37 kB
File Count
14
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
100%
2
Compared to previous week
Last Month
35.7%
19
Compared to previous month
Last Year
-76%
102
Compared to previous year
1
36
Minimalistic, super lightweight React service injection container extremely easy to use.
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.
1npm install thinjector
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 !.
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 !
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:
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}));
No vulnerabilities found.
No security vulnerabilities found.