Installation

Install Dropper packages in your JavaScript or TypeScript project.

Package Managers

Dropper is available on npm and can be installed with your preferred package manager.

npm

npm install @dropper/react

pnpm

pnpm add @dropper/react

yarn

yarn add @dropper/react

Packages

Dropper provides multiple packages for different use cases:

@dropper/react

React components and hooks for building file upload interfaces.

npm install @dropper/react

Includes:

• DropperProvider context
• useDropper hook
• File upload components (coming soon)
• File management hooks (coming soon)

Requirements:

• React 18+
• TypeScript 5+ (recommended)

@dropper/core

Framework-agnostic core library. Use this if you're not using React or want more control.

npm install @dropper/core

Includes:

• DropperClient
• UploadQueue
• Validation utilities
• Helper functions

Requirements:

• Node.js 16+
• TypeScript 5+ (recommended)

Environment Variables

Add your Dropper API key to your environment variables:

Next.js

Create a .env.local file:

NEXT_PUBLIC_DROPPER_KEY=pk_dropper_test_xxx

Vite

Create a .env file:

VITE_DROPPER_KEY=pk_dropper_test_xxx

Create React App

Create a .env file:

REACT_APP_DROPPER_KEY=pk_dropper_test_xxx

TypeScript Configuration

Dropper is built with TypeScript and includes full type definitions. No additional setup is required.

For the best experience, ensure your tsconfig.json includes:

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "bundler"
  }
}

Verify Installation

Create a simple test file to verify the installation:

import { DropperClient } from '@dropper/core'

const client = new DropperClient({
  publishableKey: 'pk_dropper_test_xxx',
})

console.log('Dropper client initialized:', client)

If you see the log message without errors, you're all set!

Next Steps

• Quick Start Guide - Build your first upload
• Core Documentation - Learn the core API
• React Documentation - Explore React components

Troubleshooting

Module not found

If you see "Cannot find module '@dropper/react'":

1. Ensure the package is installed: npm list @dropper/react
2. Try deleting node_modules and reinstalling: rm -rf node_modules && npm install
3. Check your package.json includes the package

TypeScript errors

If you see TypeScript errors:

1. Ensure TypeScript is installed: npm install -D typescript
2. Check your tsconfig.json configuration
3. Try restarting your TypeScript server

Build errors

If you encounter build errors:

1. Clear your build cache
2. Ensure you're using Node.js 16+
3. Check for conflicting dependencies

Still having issues? Contact support