SDK — React

React Component

The ImgNodus React component handles file selection, upload progress, and returns the optimized CDN URL — all in one component.

Installation

npm install @imgnodus/react

Basic Usage

import { ImgNodusUpload } from '@imgnodus/react';

export default function MyPage() {
  return (
    <ImgNodusUpload
      apiKey={process.env.NEXT_PUBLIC_IMGNODUS_KEY}
      folder="avatars"
      onSuccess={(url) => console.log('Uploaded:', url)}
      onError={(err) => console.error(err)}
    />
  );
}

Props

Prop	Type	Description
`apiKey`	string	Your ImgNodus API key.
`folder`	string	(Optional) Target folder in your bucket.
`onSuccess`	function(url)	Callback with the CDN URL of the uploaded image.
`onError`	function(error)	Callback if upload fails.
`accept`	string	MIME type filter. Default: `"image/*"`.
`maxSizeMB`	number	Max file size in MB. Default: 5.

With Next.js (App Router)

'use client';
import { ImgNodusUpload } from '@imgnodus/react';

export default function UploadPage() {
  return (
    <main>
      <h1>Upload Your Photo</h1>
      <ImgNodusUpload
        apiKey={process.env.NEXT_PUBLIC_IMGNODUS_KEY}
        onSuccess={(url) => {
          // Save URL to your database
          fetch('/api/save-image', { method: 'POST', body: JSON.stringify({ url }) });
        }}
      />
    </main>
  );
}

Node.js SDK Netlify & SPAs