Skip to content

Latest commit

 

History

History
69 lines (55 loc) · 2.72 KB

examples.md

File metadata and controls

69 lines (55 loc) · 2.72 KB
Raw

OpenAPI Explorer Examples

React

This is a javascript react example, for typescript, one additional declaration is necessary to make typescript work out of the box. See Troubleshooting with React + Typescript.

import React, { useEffect, Component } from 'react';
import 'openapi-explorer';
import { reactEventListener } from '../../../../openapi-explorer/dist/es/react.js'

export class MyApi extends Component {
  render() {
    const onRequestFunction = (data) => {
      console.log('Request:', data);
    };

    // Necessary because react by default does not know how to listen to HTML5 events
    reactEventListener({ useEffect }, 'request', onRequestFunction);
    return <openapi-explorer
      spec-url = "https://petstore.swagger.io/v2/swagger.json">
    </openapi-explorer>
  }
}

Vue

<template>
  <openapi-explorer
    spec-url="https://petstore.swagger.io/v2/swagger.json">
  </openapi-explorer>
</template>

<script>
  import 'openapi-explorer';
</script>

Vanilla Javascript/HTML

<!doctype html>
<html>
  <head>
    <script type="module" src="https://unpkg.com/openapi-explorer@0/dist/browser/openapi-explorer.min.js"></script>
    <!-- Or use a local deployed copy -->
    <!-- <script type="module" src="node_modules/openapi-explorer/dist/openapi-explorer.min.js"></script> -->
  </head>
  <body>
    <openapi-explorer spec-url="https://petstore.swagger.io/v2/swagger.json"> </openapi-explorer>
  </body>
</html>

SSR - Server side rendering

SSR works as linked documents. You can include any of the above snippets and they will work as long as they are rendered on the client. If you run into any issues checkout the SSR troubleshooting guide

CSS Frameworks

When using a CSS framework it comes with color palettes amongst other things. You may or may not want to use those colors. The OpenAPI Explorer also comes with colors to make it easier to integrate.

  • By default the CSS framework colors will take precedent.
  • You can explicitly set the colors that the OpenAPI Explorer uses by using the defined the CSS variables section.

OpenAPI Specification generation

To use the OpenAPI Explorer, there must be a spec generated. Many libraries exist to convert static-strict type code to an openapi spec which can automatically be used by this framework. Find the one that works best for your application and then just point the OpenAPI Explorer spec url at the generated endpoint.

See all OpenAPI Tools