@uploadfly/react-widget NPM

Uploadfly React Widget Component Documentation

Installation
Usage
Props
Event Handlers
Styling
Attribution

Installation

To use the UfWidget component in your React application, run the following command:

npm install i @uploadfly/react-widget

Usage

Import the UfWidget component and use it within your React application:

import React from "react";
import UfWidget from "@uploadfly/react-widget";
import "@uploadfly/react-widget/dist/style.css";

function App() {
  // Your component code here

  return (
    <div>
      <h1>File Upload Widget</h1>
      <UfWidget apiKey="YOUR_API_KEY">
        {/* Content that triggers the modal */}
        <button>Upload a file</button>
      </UfWidget>
    </div>
  );
}

export default App;

Props

The UfWidget component accepts the following props:

apiKey (string, required): Your API key for accessing the file upload service.
hideAttribution (boolean, optional): If set to true, hides the attribution link.
onUploadComplete (function, optional): A callback function that receives upload completion data.
accentColor (string, optional): Custom accent color for styling the widget (default is #f35815).

Event Handlers

onUploadComplete(data: object): A callback function called when the upload process is completed. It receives an object containing the following properties:
- status (number): HTTP status code of the upload response.
- success (boolean): Indicates whether the upload was successful.
- data (object): Information about the uploaded file, including:
  - url (string): URL to the uploaded file.
  - name (string): Name of the uploaded file.
  - size (number): Size of the uploaded file in bytes.
  - type (string): MIME type of the uploaded file.
  - path (string): Path to the uploaded file.