How to use the Redoc React component

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude
• Connect to Cursor

  Install MCP server on Cursor
• Connect to VS Code

  Install MCP server on VS Code

Before you start

Install the following dependencies required by Redoc:

• 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

Step 1 - Import theRedocStandalone component

import { RedocStandalone }from 'redoc';

Step 2 - Use the component

You can either link to your OpenAPI definition with a URL, using the following format:

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

Or you can pass your OpenAPI definition as an object, using the following format:

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

Optional - Pass options

Options can be passed into theRedocStandalone component to alter how it renders.

For example:

<RedocStandalone  definitionUrl="https://redocly.github.io/redoc/museum.yaml"  options={{    hideLoading:true,    sanitize:true,    showExtensions:true,  }}/>

For more information on configuration options, refer to theConfiguration options for openapi section of the documentation. Options that are available for Redoc CE are annotated with: "Supported in Redoc CE.".