FileKit React

React components for easy media management with FileKit.dev Must have a registered account on https://filekit.dev

Installation

npm install filekit-react

Usage

Setup Token (Server-side)

// Next.js App Router - app/actions.ts
'use server';
import { createToken } from 'filekit-react';

export async function getFileKitToken() {
  const { token, error } = await createToken('your-api-key');
  return { token, error };
}

// Next.js Pages Router - pages/api/token.ts
import { createToken } from 'filekit-react';

export default async function handler(req, res) {
  const { token, error } = await createToken('your-api-key');
  res.json({ token, error });
}

Upload Component

import { Uploader } from 'filekit-react';
import { useState } from 'react';

function App() {
  const [token, setToken] = useState('your-token');
  
  function handleUpload({ reference }) {
    console.log('Uploaded:', reference);
  }
  
  function handleProgress({ percentage }) {
    console.log('Progress:', percentage);
  }
  
  return (
    <Uploader 
      token={token}
      onUpload={handleUpload}
      onProgress={handleProgress}
    />
  );
}

Video Player

import { Video } from 'filekit-react';

function App() {
  return (
    <Video
      reference="your-video-reference"
      token="your-token"
      controls
      autoPlay
    />
  );
}

Image Component

import { Image } from 'filekit-react';

function App() {
  return (
    <Image 
      reference="your-image-reference"
      token="your-token"
      alt="My image"
    />
  );
}

API

Uploader Props

• `token` (required): Authentication token
• `onUpload`: Callback when upload completes
• `onProgress`: Callback for upload progress
• `onError`: Callback for errors

Video Props

• `reference` (required): Media reference ID
• `token` (required): Authentication token
• `onError`: Callback for errors
• All standard video element props

posterSrc is resolved with the selected or default thumbnail

Image Props

• `reference` (required): Image reference ID
• `token` (required): Authentication token
• `alt`: Alt text (default: "Image")
• `onError`: Callback for errors
• All standard img element props

License

MIT