Filestack React SDK v7.0.0: TypeScript Rewrite, React 19 Support, and More

Highlights

🚀 New Features

• Full TypeScript support: The entire SDK has been rewritten from JavaScript/JSX to TypeScript/TSX. Type declaration files (.d.ts) now ship directly in the package, so you get autocomplete and type safety out of the box (no @types/filestack-react package needed).
• FilestackProvider context: Set your apikey, clientOptions, and callbacks (onSuccess, onUploadDone, onError) once at the app level. Every picker component (PickerOverlay, PickerInline, PickerDropPane) reads from that shared context automatically, falling back to its own props if you need to override for a specific instance.
• filestack-js v4 support: Unlocking newer client methods like download, prefetch, setSecurity, and setCname, plus folder upload support. We recommend installing the latest 4.x release for the newest fixes.
• React 19 support: The picker components and hooks are tested and verified against both React 18.3.1+ and React 19.
• Framework compatibility (Next.js, Vite, Remix): ‘use client’ directives, useId() for stable SSR-safe IDs, and corrected ESM/CJS exports mean the SDK now works reliably in App Router and Server Components. No more manual workarounds.
• Storybook: Interactive stories are now available for PickerOverlay, PickerInline, PickerDropPane, and FilestackProvider, so you can explore component behavior before wiring it into your app.

⚙️ Improvements

• Cleaner console output: Upload results are no longer dumped to the browser console by default. Previously, every successful upload logged the full result object twice (once via onSuccess, once via onUploadDone), which could expose file handles and URLs in production. Now, if you don’t provide callbacks, the SDK stays silent.
• No more duplicate callback firing: If you provided both onSuccess and onUploadDone, both were being called on every upload. Now only onUploadDone fires, with onSuccess used as a fallback if onUploadDone isn’t provided, so your analytics and side effects won’t double-fire.
• 35/35 tests passing across 5 test suites: Including new coverage for PickerOverlay and PickerDropPane, previously untested components.
• Smaller footprint for existing filestack-js users: filestack-js moves from a direct dependency to a peer dependency, so you’re no longer bundling a duplicate copy if it’s already in your project.

🐛 Bug Fixes

• Fixed infinite re-render loop in usePicker: The hook’s useEffect was re-running on every render because its dependency array included values that got new references each time, causing the picker to be destroyed and recreated repeatedly. This was the root cause behind several reported issues. Thanks to everyone who reported these behaviors. Your reports helped us track this down.
• Fixed Vite module resolution errors and Next.js installation issues.

Deep Dive: The FilestackProvider Context

The most useful day-to-day change in this release is the FilestackProvider context, paired with the full TypeScript rewrite behind it.

Previously, every picker component needed its own apikey, clientOptions, and callback props, even if you were rendering several pickers in the same app with identical configuration. That meant repeating the same props everywhere, with no single source of truth. In v7.0.0, FilestackProvider wraps your app (or any subtree) and holds that configuration in context. Picker components underneath it read from the provider automatically, and only fall back to their own props if you explicitly pass something different.

Wrap your app once, and every picker component underneath it inherits the same configuration:

import { FilestackProvider, PickerDropPane } from 'filestack-react';

// Set your API key and shared options once, at the root of your app
function App() {
  return (
    <FilestackProvider 
      apikey="YOUR_API_KEY" 
      onUploadDone={(result) => console.log(result.filesUploaded)}>
      {/* Children inherit config */}
    </FilestackProvider>
  );
}

// No need to repeat apikey or onUploadDone here — inherited from FilestackProvider
function UploadWidget() {
  return <PickerDropPane />;
}

Why this matters: if your app renders the picker in more than one place (a header upload button and a settings page avatar picker, for example), you no longer have to keep their configuration in sync by hand. Set it once at the provider, and override it per-component only when you actually need something different. Combined with the shipped TypeScript types, your editor will also flag a mismatched prop before you ever run the app.

Upgrade Guide

1. Update your dependencies:

   npm install filestack-react@7.0.0 filestack-js@^4.0.0
   # or
   yarn add filestack-react@^7.0.0 filestack-js@^4.0.0

2. (Ensure your Node version is >= 18.3.1)
3. Remove @types/filestack-react if you had it installed. Types now ship with the package itself:

   npm uninstall @types/filestack-react

4. Add filestack-js explicitly to your package.json if it isn’t already listed: it’s now a peer dependency and won’t be installed automatically as a transitive dependency.
5. Check your usePicker / picker component callbacks. If you use both onSuccess and onUploadDone, verify your app still behaves correctly now that only onUploadDone fires when both are present.
6. Remove any workarounds for SSR/Next.js/Vite issues. The ‘use client’ directives and corrected ESM/CJS exports mean previous workarounds for App Router or Vite resolution errors are no longer needed and can be cleaned up.
7. Run your test suite. With the TypeScript rewrite, you may see new type errors surfaced in your own code where prop types were previously unchecked at compile time (these are worth fixing, not suppressing).

Try It Today

TypeScript types, React 19 support, and a shared FilestackProvider context, all in one release. If you’re building with Next.js, Vite, or Remix, this is the smoothest filestack-react has ever felt.

npm install filestack-react@7.0.0 filestack-js@^4.0.0

• Filestack React SDK Docs
• Get Support / File an Issue
• View on npm