# react-use-service

> This package aims to help users of React and React Native to use Dependency Injection (DI) and Service Pattern.

Latest version **0.1.8** (published 2022-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-service
pnpm add react-use-service
yarn add react-use-service
bun add react-use-service
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2022-06-17 |
| First published | 2022-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 32.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Muryllo Pimenta de Oliveira |
| Maintainers | muryllo.pimenta |
| Keywords | react, service, decorators, dependency, injection, di, ioc |

## Links

- npm: https://www.npmjs.com/package/react-use-service
- Repository: https://github.com/MurylloEx/react-use-service
- Homepage: https://github.com/MurylloEx/react-use-service#readme
- Issues: https://github.com/MurylloEx/react-use-service/issues
- npm.io page: https://npm.io/package/react-use-service

## Dependencies (4)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [react](https://npm.io/package/react.md) ^17.0.2
- [typescript](https://npm.io/package/typescript.md) ^4.5.5
- [reflect-metadata](https://npm.io/package/reflect-metadata.md) ^0.1.13

## Alternatives

- [memory-cache](https://npm.io/package/memory-cache.md) — 795.0K weekly downloads
- [@httptoolkit/proxy-agent](https://npm.io/package/@httptoolkit/proxy-agent.md) — 11.2K weekly downloads
- [express-cache-controller](https://npm.io/package/express-cache-controller.md) — 5.3K weekly downloads
- [http-cache-middleware](https://npm.io/package/http-cache-middleware.md) — 4.5K weekly downloads
- [cache2](https://npm.io/package/cache2.md) — 1.5K weekly downloads

## Recent versions

- 0.1.8 (latest) — 2022-06-17
- 0.1.4 — 2022-02-24

## README

<h1 align="center">React Use Service</h1>
<p align="center">
  <img src="https://i.imgur.com/HPX7AP1.png" width="120" alt="React Logo" />
</p>
<h2 align="center">This project was created to use Dependency Injection in React</h2>
<p align="center">This package aims to help users of React and React Native to use Dependency Injection (DI) and service pattern.</p>
<p align="center">
  <img src="https://badgen.net/badge/lang/TypeScript/purple?icon=label"/> 
  <img src="https://badgen.net/badge/license/MIT/green?icon=label"/>
  <img src="https://badgen.net/badge/authors/Muryllo/red?icon=label"/>
  <img src="https://badgen.net/badge/frontend/React/orange?icon=label"/>
</p>

To use this you need the latest version of React, Node.js and npm/yarn.

## Installation

```sh
git clone https://github.com/MurylloEx/react-use-service.git
cd react-use-service
npm install
npm start
```

Add the following lines in your tsconfig.json to enable experimental decorators and emit decorator metadata.

`tsconfig.json`
```json
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
```

## Example

`services.ts`
```ts
@Service()
export class DatabaseService {

  constructor() {}

  insert(table: string, data: { [column: string]: string | number }) {
    console.log(`writing to ${table}:`);
    console.log(data);
  }

}

@Service()
export class MyLoggerService {
  
  constructor(private dbService: DatabaseService) {}

  info(message: string) {
    this.dbService.insert('log', {
      level: 200,
      message: message
    });
  }

}

@Service()
export class UserService {
  
  constructor(private logger: MyLoggerService) {}

  editUser(userId: number) {
    this.logger.info(`User ${userId} has been edited`);
  }

}
```

`index.tsx`
```tsx
const Container = ServiceContainer.create().providers([
  DatabaseService,
  MyLoggerService,
  UserService
]);

ReactDOM.render(
  <ServiceProvider container={Container}>
    <App />
  </ServiceProvider>,
  document.getElementById('root')
);
```

`App.tsx`
```tsx
export function App() {
  const user = useService<UserService>(UserService);

  useEffect(() => {
    user.editUser(3);
  }, [user]);

  return (
    <p>Hello world!</p>
  );
}
```

## Metadata

```
Muryllo Pimenta – muryllo.pimenta@upe.br
```

Distribuído sobre a licença MIT. Veja ``LICENSE`` para mais informações.

## Contributing

1. Fork it (<https://github.com/MurylloEx/react-use-service/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes (`git commit -am 'Add some fooBar'`)
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request

---
_Source: https://npm.io/package/react-use-service · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._