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.

Shared Configuration Context

Set your API key and callbacks once with FilestackProvider, and every picker component in your app inherits them automatically.

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

🎨 PickerDropPane
Dedicated drag-and-drop upload zone

📊 FilestackProvider
Shared context for API key, options, and callbacks across your app

🖼️ client
The full filestack-js client, re-exported for transforms, metadata, and more

Transform Uploaded File Using Filestack Client

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

const filestackClient = client.init('YOUR_API_KEY');

const FileManager = () => {
  const [imageUrl, setImageUrl] = useState(null);

  const handleUploadDone = (result) => {
    const handle = result.filesUploaded[0].handle;

    // Build a transformed URL from the uploaded file's handle
    filestackClient
      .transform(handle, { resize: { width: 300, height: 300 } })
      .then((transformedUrl) => setImageUrl(transformedUrl));
  };

  return (
    <div>
      <PickerInline
        apikey={'YOUR_API_KEY'}
        onUploadDone={handleUploadDone}
      />

      {imageUrl && <img src={imageUrl} alt="Transformed upload" />}
    </div>
  );
};

export default FileManager;

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-js filestack-react

yarn add filestack-js filestack-react

pnpm add filestack-js 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
      </<span style="color: #00f;">button>

      {isOpen && (
        <PickerOverlay
          apikey={'YOUR_API_KEY'}
          onUploadDone={handleSuccess}
          onError={(err) => setIsOpen(false)}
          pickerOptions={{
            accept: ['image/*', 'video/*'],
            maxFiles: 10,
            fromSources: [
              'local_file_system',
              'url',
              'imagesearch'
            ]
          }}
        />
      )}
    </<span style="color: #00f;">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.