FlexDoc Client

A modern, customizable React component library for rendering OpenAPI documentation.

Installation

npm install @bluejeans/flexdoc-client

Usage

Basic Usage

import { FlexDoc } from '@bluejeans/flexdoc-client';
import myOpenApiSpec from './my-openapi-spec.json';

function ApiDocumentation() {
  return <FlexDoc spec={myOpenApiSpec} theme='light' />;
}

With Custom Styling

import { FlexDoc } from '@bluejeans/flexdoc-client';
import myOpenApiSpec from './my-openapi-spec.json';

function ApiDocumentation() {
  return (
    <FlexDoc
      spec={myOpenApiSpec}
      theme='dark'
      customStyles={{
        fontFamily: 'Inter, sans-serif',
        // Add any other CSS properties
      }}
    />
  );
}

Loading OpenAPI Spec from URL

import { useState, useEffect } from 'react';
import { FlexDoc, OpenAPIParser } from '@bluejeans/flexdoc-client';

function ApiDocumentation() {
  const [spec, setSpec] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchSpec() {
      try {
        const response = await fetch('https://your-api.com/openapi.json');
        const text = await response.text();
        const parsedSpec = await OpenAPIParser.parseSpec(text);
        setSpec(parsedSpec);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchSpec();
  }, []);

  if (loading) return <div>Loading API documentation...</div>;
  if (error) return <div>Error loading API documentation: {error}</div>;
  if (!spec) return <div>No API specification found</div>;

  return <FlexDoc spec={spec} />;
}

Props

| Prop | Type | Default | Description | | -------------- | --------------------- | --------- | ---------------------------------------------- | | spec | OpenAPISpec | Required | The OpenAPI specification object | | theme | 'light' \| 'dark' | 'light' | The theme to use for the documentation | | customStyles | React.CSSProperties | {} | Custom CSS styles to apply to the root element |

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

License

MIT