npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

openapi-fetch-gen

v0.2.0

Published

OpenAPI TypeScript client generator with native fetch support

Downloads

72

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

santiagoappsantiagoapp

Keywords

openapitypescriptfetchcode-generatorapi-client

Readme

API Schema Generator

This npm package generates API endpoints and React hooks based on an OpenAPI schema, with TypeScript types for improved type safety and autocompletion. Built for use with fetch, it offers native, dependency-free HTTP requests.

Features

  • API Endpoints: Generates endpoint functions with fetch implementation, providing a simple way to integrate APIs with native JavaScript methods.
  • TypeScript Types: Automatically generates TypeScript types for API requests and responses based on the OpenAPI schema.
  • React Hooks: Optional generation of React hooks, simplifying data fetching with hooks tailored to each endpoint.

Installation

Install the package via npm:

npm install openapi-fetch-gen

Usage

To generate API endpoints, TypeScript types, and React hooks (optional), use the CLI command:

node dist/cli.js -s schema.json -o generated --hooks react

Parameters

  • -s, --schema: Path to the OpenAPI schema file (e.g., schema.json).
  • -o, --output: Directory where the generated files will be saved.
  • --hooks: Adds React hooks for each API endpoint (optional). Currently supports react.

Example

node dist/cli.js -s ./openapi-schema.json -o ./src/api --hooks react

Generated Files

  • TypeScript Types: Strongly-typed request and response objects for each endpoint.
  • API Endpoints: Functions using fetch to call each API endpoint.
  • React Hooks: Optional React hooks for seamless API integration.

Tip: Using TypeScript with this package enhances type safety and auto-completion, reducing errors and improving development speed.

Project Vision

This package is designed to bring type safety and streamlined API integration to the TypeScript and React ecosystem by utilizing OpenAPI schemas and native fetch requests.

NPM Description

Generate TypeScript types, fetch-based API endpoints, and React hooks from OpenAPI schemas with a simple CLI. Build robust, type-safe API integrations in TypeScript with minimal dependencies.