Skip to content
Last updated

Use Redoc CE React component

Before you begin

Install the following dependencies required by Redoc CE if you do not already have them installed:

  • react
  • react-dom
  • mobx
  • styled-components
  • core-js

If you have npm installed, you can install these dependencies using the following command:

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

Build API documentation

  1. Import the RedocStandalone component.
import { RedocStandalone } from 'redoc';

  1. Use the component, either:

    • link to your OpenAPI definition with a URL, using the following format:
    <RedocStandalone specUrl="url/to/your/spec"/>
    • pass your OpenAPI definition as an object, using the following format:
    <RedocStandalone spec={/* spec as an object */}/>

  2. (Optional) You can pass options to the RedocStandalone component to alter how it renders.

    For example:

    <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 section of the documentation.

Optional - Specify onLoaded callback

You can also specify the onLoaded callback, which is called each time Redoc CE is fully rendered or when an error occurs (with an error as the first argument).

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

Resources

 
Next page