Skip to main content

Component Usage

You can also display the whole OpenAPI documentation using a React component to do custom layouts like Nested views or to manually pass API files.

File format

You cannot import a React component inside a .md file.
Change your file extension to .mdx before importing the React Component.
Read more here about MDX in Docusaurus.

Import​

import Redoc from '@theme/Redoc';

Examples​

Basic example​

It displays here the first element of the redocusaurus configuration.

import Redoc from '@theme/Redoc';

<Redoc />;

External URL example​

import Redoc from '@theme/Redoc';

<Redoc url="https://redocly.github.io/redoc/openapi.yaml" />;

Specific id example​

The id is used to look for the OpenAPI spec defined in docusaurus.config.

import Redoc from '@theme/Redoc';

<Redoc id="using-single-yaml" />;

Pass JSON Spec Directly​

You can also provide a JSON spec to the component like this. Docusaurus will load the file directly during build time, but the file will not undergo any pre-processing at build time and so some features might be missing.

import Redoc from '@theme/Redoc';
import openApi from './api-with-examples.json';

<Redoc spec={openApi} />;
YAML support

You cannot load yaml file like this:

import openApi from './api-with-examples.yaml';

Without the right Docusaurus configuration to handle such file format.

Results​