React

How to use the Redoc React component

Install Dependencies

Install the required dependencies:

npm i react react-dom mobx styled-components core-js

Import RedocStandalone

import { RedocStandalone } from 'redoc';

Use the Component

URL Specification

<RedocStandalone specUrl="url/to/your/spec"/>

Object Specification

<RedocStandalone spec={/* spec as an object */}/>

Configuration Options

Theme Customization

You can customize the appearance and behavior using the options prop:

<RedocStandalone
  specUrl="http://petstore.swagger.io/v2/swagger.json"
  options={{
    nativeScrollbars: true,
    theme: { 
      colors: { 
        primary: { 
          main: '#dd5522' 
        } 
      } 
    },
  }}
/>

For more information on configuration options, refer to the Configuration options for Reference docs. Look for options marked “Supported in Redoc CE”.

Loading Callback

You can add an onLoaded callback that fires when Redoc finishes rendering:

<RedocStandalone
  specUrl="http://petstore.swagger.io/v2/swagger.json"
  onLoaded={(error) => {
    if (!error) {
      console.log('Yay!');
    }
  }}
/>

The onLoaded callback is useful for handling loading states or errors in your application.