Installation

Install the MIMS SDK React package to add document capabilities to your application.

Package Installation

Install the SDK using your preferred package manager:

npm install @mims/sdk-react

Verify Installation

After installation, verify the package is correctly added to your dependencies:

package.jsonjson

{
  "dependencies": {
    "@mims/sdk-react": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

TypeScript Configuration

The SDK includes TypeScript definitions out of the box. No additional@types packages are required.

Ensure your tsconfig.json includes:

tsconfig.jsonjson

{
  "compilerOptions": {
    "moduleResolution": "bundler", // or "node"
    "esModuleInterop": true,
    "strict": true,
    "jsx": "react-jsx"
  }
}

Framework-Specific Setup

Next.js (App Router)

For Next.js 13+ with the App Router, SDK components must be used in Client Components. The provider should be wrapped in a client component file.

app/providers.tsxtypescript

'use client';

import { MIMSProvider } from '@mims/sdk-react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <MIMSProvider apiKey={process.env.NEXT_PUBLIC_MIMS_API_KEY!}>
      {children}
    </MIMSProvider>
  );
}

app/layout.tsxtypescript

import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Next.js (Pages Router)

pages/_app.tsxtypescript

import type { AppProps } from 'next/app';
import { MIMSProvider } from '@mims/sdk-react';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <MIMSProvider apiKey={process.env.NEXT_PUBLIC_MIMS_API_KEY!}>
      <Component {...pageProps} />
    </MIMSProvider>
  );
}

Vite

src/main.tsxtypescript

import React from 'react';
import ReactDOM from 'react-dom/client';
import { MIMSProvider } from '@mims/sdk-react';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <MIMSProvider apiKey={import.meta.env.VITE_MIMS_API_KEY}>
      <App />
    </MIMSProvider>
  </React.StrictMode>
);

Create React App

src/index.tsxtypescript

import React from 'react';
import ReactDOM from 'react-dom/client';
import { MIMSProvider } from '@mims/sdk-react';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <MIMSProvider apiKey={process.env.REACT_APP_MIMS_API_KEY!}>
      <App />
    </MIMSProvider>
  </React.StrictMode>
);

Environment Variables

Store your API key in environment variables for security:

.env.localbash

NEXT_PUBLIC_MIMS_API_KEY=pk_live_your_key_here

Git Security

Always add your .env.local file to .gitignoreto prevent accidentally committing your API keys.

Bundle Size

The SDK is optimized for minimal bundle impact:

Core SDK: ~15KB gzipped
PDF.js (lazy loaded): ~200KB gzipped (loaded only when needed)
Signature Pad: ~8KB gzipped

The PDF rendering library is lazy-loaded, so it only adds to your initial bundle when the PDFViewer component is rendered.

Troubleshooting

Module Resolution Errors

If you see module resolution errors, ensure your bundler supports ESM:

// vite.config.ts
export default defineConfig({
  resolve: {
    dedupe: ['react', 'react-dom'],
  },
});

React Version Mismatch

If you see errors about React hooks, ensure you don't have multiple React versions installed:

npm ls react
npm dedupe

Next Steps

After installation, proceed with: