React SDK

React Components for Powerful File Management

Integrate file uploading, image editing, and transformations seamlessly into your React applications with our purpose-built components.

Install via npm

View React Docs

Basic React Component

import React from 'react';
import { PickerOverlay } from 'filestack-react';

const FileUploader = () => {
  return (
    <PickerOverlay
      apikey={'YOUR_API_KEY'}
      onUploadDone={(result) => console.log(result)}
      pickerOptions={{
        maxFiles: 5,
        accept: 'image/*'
      }}
    />
  );
};

Built for Modern React Development

Our React SDK provides ready-to-use components that integrate perfectly with your React ecosystem and development workflow.

Ready-to-Use Components

Drop-in React components that work out of the box. No complex setup or configuration required to get started.

Fully Customizable

Extensive props and styling options to match your design system. Override styles, themes, and behaviors.

React Hooks Integration

Built-in hooks for managing upload state, progress, and file metadata that integrate with your React state management.

TypeScript Support

Full TypeScript definitions included for better developer experience and type safety in your projects.

Performance Optimized

Lazy loading, code splitting, and optimized rendering to keep your React app fast and responsive.

Server-Side Rendering

Full SSR compatibility with Next.js, Gatsby, and other React frameworks for better SEO and performance.

Powerful React Components

Our React SDK includes multiple components designed for different use cases, from simple file uploads to complex transformation workflows.

📁 PickerOverlay
Modal file picker with drag & drop

📎 PickerInline
Embedded picker for seamless UX

🎨 Transform
Image transformation component

📊 UploadProgress
Real-time upload progress tracking

🖼️ ImagePreview
Responsive image display with transformations

Complete File Upload Example

import React, { useState } from 'react';
import {
  PickerInline,
  Transform,
  ImagePreview
} from 'filestack-react';

const FileManager = () => {
  const [handle, setHandle] = useState(null);

  return (
    <div>
      <PickerInline
        apikey={'YOUR_API_KEY'}
        onSuccess={(result) => {
          setHandle(result.filesUploaded[0].handle);
        }}
      />

      {handle && (
        <ImagePreview
          handle={handle}
          transforms={{
            resize: { width: 300, height: 300 }
          }}
        />
      )}
    div>
  );
};

Trusted by innovative companies worldwide

Quick Installation

Get started with our React SDK in seconds using your preferred package manager.

Install Package

npm install filestack-react

yarn add filestack-react

pnpm add filestack-react

Basic Usage

Import and use components in your React application:

import { PickerOverlay } from 'filestack-react'; // Use in your component 
<PickerOverlay apikey="YOUR_API_KEY" />

Working App Example

// Complete working example
import React, { useState } from 'react';
import { PickerOverlay } from 'filestack-react';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [files, setFiles] = useState([]);

  const handleSuccess = (result) => {
    setFiles(result.filesUploaded);
    setIsOpen(false);
    console.log('Files uploaded:', result);
  };

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Upload Files
      button>

      {isOpen && (
        <PickerOverlay
          apikey={'YOUR_API_KEY'}
          onSuccess={handleSuccess}
          onCancel={() => setIsOpen(false)}
          pickerOptions={{
            accept: ['image/*', 'video/*'],
            maxFiles: 10,
            fromSources: [
              'local_file_system',
              'url',
              'imagesearch'
            ]
          }}
        />
      )}
    div>
  );
}

export default App;

Get Started with React File Management

Join thousands of React developers who trust Filestack for their file management needs. Get started today with our comprehensive React SDK.