Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@metaengine/openapi-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@metaengine/openapi-react

Generate TypeScript/React services and models from OpenAPI specifications.

Features

✅ React 18+ - Modern React with hooks
✅ TypeScript - Fully typed API clients
✅ TanStack Query - Optional integration with useQuery/useMutation
✅ Fetch API - No dependencies, uses native fetch
✅ Monorepo Friendly - Configurable environment variables
✅ Framework Agnostic - Works with Vite, Next.js, Create React App

Installation

npm install --save-dev @metaengine/openapi-react

Requirements

Node.js 14+
.NET 6.0+ runtime (Download)

Usage

Basic

npx @metaengine/openapi-react api.yaml ./src/api

With TanStack Query

npx @metaengine/openapi-react api.yaml ./src/api --tanstack-query --documentation

Vite Project

npx @metaengine/openapi-react api.yaml ./src/api --base-url-env VITE_API_URL

Then in your .env:

VITE_API_URL=http://localhost:3000/api

Next.js Project

npx @metaengine/openapi-react api.yaml ./src/api --base-url-env NEXT_PUBLIC_API_URL

Filter by Tags

# Generate only user and auth endpoints
npx @metaengine/openapi-react api.yaml ./src/api --include-tags users,auth --documentation

CLI Options

Option	Description	Default
`--base-url-env <name>`	Environment variable name for base URL	`REACT_APP_API_BASE_URL`
`--service-suffix <suffix>`	Service naming suffix	`Api`
`--tanstack-query`	Enable TanStack Query integration	`false`
`--documentation`	Generate JSDoc comments	`false`
`--options-threshold <n>`	Parameter count for options object	`4`
`--include-tags <tags>`	Filter by OpenAPI tags (comma-separated)	-
`--strict-validation`	Enable strict OpenAPI validation	`false`
`--verbose`	Enable verbose logging	`false`

Examples

Basic Usage

// Generated code
import { usersApi } from './api/users-api';

// Use it
const users = await usersApi.getUsers();

With TanStack Query

// Generated hooks
import { useGetUsers } from './api/users-api';

function UserList() {
  const { data: users, isLoading } = useGetUsers();

  if (isLoading) return <div>Loading...</div>;
  return <div>{users?.map(u => <div key={u.id}>{u.name}</div>)}</div>;
}

Monorepo - Multiple APIs

# Users API
npx @metaengine/openapi-react users-api.yaml ./src/users-api \
  --base-url-env VITE_USERS_API_URL

# Orders API
npx @metaengine/openapi-react orders-api.yaml ./src/orders-api \
  --base-url-env VITE_ORDERS_API_URL

.env:

VITE_USERS_API_URL=http://localhost:3001/api
VITE_ORDERS_API_URL=http://localhost:3002/api

Environment Variables

The generator creates an api-config.ts file that reads from environment variables:

Vite (starts with VITE_):

const baseUrl = import.meta.env.VITE_API_URL;

Next.js (starts with NEXT_PUBLIC_):

const baseUrl = process.env.NEXT_PUBLIC_API_URL;

Create React App (other names):

const baseUrl = process.env.REACT_APP_API_BASE_URL;

License

MIT