openapi-react

A better swagger 2.0 document than swagger-ui and redoc ! (openapi spec support is coming soon! )

Demo

See our Demo

Install

npm install --save openapi-react

Usage

Load by url:

import { OpenApi } from 'openapi-react'

function App() {
    return <OpenApi url={"https://petstore.swagger.io/v2/swagger.json"} />
}

Load by swagger json object

import { OpenApi } from 'openapi-react'

function App() {
    return <OpenApi spec={swaggerJsonObject} />
}

Support Markdown syntax for description

In your swagger.json, you can assign Markdown content to description, openapi-react will follow Markdown spec to render it.

Add or Modify Sections (swagger tags)

import { OpenApi } from 'openapi-react'

const tags = [{
  name: 'Overview',
  description: '### Why you need to use openapi-react\n\n\
  *Execuatable restful api\n\n\
  *Smaller size\n\n\
  *Markdown syntax support\n\n\
  *Easy to insert sections\n\n\
  '
}];

function App() {
    return <OpenApi url={"https://petstore.swagger.io/v2/swagger.json"} tags={tags}/>
}

Use with theme

import { OpenApi } from 'openapi-react'

const theme = {
  layout:{
    leftNav: {
      width: '320px'
    }
  }
}

function App() {
    return <OpenApi spec={swaggerJsonObject} theme={theme} />
}

License

MIT © zlkca

run example

Firstly, build library:

git clone https://github.com/yocompute/openapi-react.git
cd openapi-react
npm i
npm run build

Then, you can go into example folder to try the lib:

cd example
npm i
npm start