Skip to content

Commit 71e9544

Browse files
authored
Merge pull request #4 from CERN/licence-and-readme
* **README.md** * Rewritten to better explain the purpose and usage of the project * Added minimal code examples to help new users get started quickly * Included a link to the demo project for more in-depth guidance * **LICENSE** * Updated to reflect CERN as the copyright holder
2 parents 181f5ae + 0e8c763 commit 71e9544

2 files changed

Lines changed: 122 additions & 3 deletions

File tree

LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2024 Stefano Marzo
3+
Copyright (c) 2024 CERN
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

README.md

Lines changed: 121 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,124 @@ SPDX-FileCopyrightText: 2025 CERN
44
SPDX-License-Identifier: MIT
55
-->
66

7-
# React OpenApi Hook
8-
Please find here an example of use: https://github.com/StefanoMarzo/react-openapi-generator-hook-demo
7+
# `react-openapi-generator-hook`
8+
9+
A lightweight React hook utility for calling API methods generated from OpenAPI specifications. Simplify your frontend API integration by using a consistent, declarative hook-based approach — without manually instantiating and managing API clients.
10+
11+
## 🚀 Features
12+
13+
* ⚛️ React-first API interaction with minimal boilerplate
14+
* 🔄 Built-in support for async states: `loading`, `data`, and `error`
15+
* ⚙️ Support for multiple API configurations and endpoints
16+
* ✅ Compatible with OpenAPI Generator's generated `*ApiFactory` functions
17+
18+
## 🧩 Installation
19+
20+
```bash
21+
npm install react-openapi-generator-hook
22+
```
23+
24+
## 🛠️ Basic Usage
25+
26+
```tsx
27+
import { useApi, OpenApiProvider } from 'react-openapi-generator-hook'
28+
import { PetApiFactory, Configuration } from './generated'
29+
import axios from 'axios'
30+
31+
// Setup config
32+
const axiosInstance = axios.create({ withCredentials: true }) // custom headers here
33+
const configMap = {
34+
PETS: {
35+
axiosInstance,
36+
configuration: new Configuration({ accessToken: '1234567890' }),
37+
baseUrl: 'https://petstore3.swagger.io/api/v3',
38+
},
39+
USERS: {
40+
axiosInstance,
41+
configuration: new Configuration({ accessToken: '0123456789' }),
42+
baseUrl: 'https://users.cern.ch/api/v3',
43+
}
44+
}
45+
46+
// Wrap your app or your components
47+
<OpenApiProvider defaultConfigurationId="PETS" openApiConfigurationMap={configMap}>
48+
<App />
49+
</OpenApiProvider>
50+
```
51+
Within your component
52+
```tsx
53+
// E.g. PetComponent.tsx
54+
const [{ data, error, loading }, fetchPet] = useApi({
55+
apiFactory: PetApiFactory,
56+
methodName: 'getPetById',
57+
requestParameters: 4,
58+
})
59+
60+
return (
61+
<div>
62+
{loading && 'Loading...'}
63+
{error && <div>Error: {error.message}</div>}
64+
{data && <div>Pet name: {data.name}</div>}
65+
</div>
66+
)
67+
```
68+
69+
## 📦 API
70+
71+
### `useApi`
72+
73+
A custom hook for invoking a specific API method from an OpenAPI-generated factory.
74+
75+
**Parameters:**
76+
77+
```ts
78+
{
79+
apiFactory: (config: Configuration) => any, // The API factory to use
80+
methodName: string, // Name of the method to invoke
81+
requestParameters?: any, // Parameters to pass to the method
82+
},
83+
{
84+
manual?: boolean // if true, does not send request on component mount
85+
configurationId?: string // (Optional) Configuration key to use
86+
}
87+
```
88+
89+
**Returns:**
90+
91+
```ts
92+
[
93+
{ data, error, loading }, // Result state
94+
refetch // Function to manually re-trigger the call
95+
]
96+
```
97+
98+
### `OpenApiProvider`
99+
100+
A context provider that supplies configuration for all `useApi` calls.
101+
102+
**Props:**
103+
104+
* `defaultConfigurationId: string` – (optional) the default API to use
105+
* `openApiConfigurationMap: Record<string, OpenApiConfigurationType>` – a map of configurations:
106+
107+
* `axiosInstance`: Axios instance to use
108+
* `configuration`: OpenAPI `Configuration` object (with accessToken, etc.)
109+
* `baseUrl`: Base URL of the API
110+
111+
112+
You can also extend this setup to dynamically refresh tokens or inject headers as needed via `axios`.
113+
114+
## 🧪 Example Project
115+
116+
A guided example project showing how to use the hook is available here:
117+
👉 [react-openapi-generator-hook-demo](./examples/demo)
118+
119+
## 🧱 Built With
120+
121+
* [React](https://reactjs.org)
122+
* [Axios](https://axios-http.com)
123+
* [OpenAPI Generator](https://openapi-generator.tech/)
124+
125+
## 📃 License
126+
127+
MIT © CERN

0 commit comments

Comments
 (0)