Privacy-first image conversion and editing React component. Convert HEIC, JPEG, PNG to WebP with crop, rotate, filters, and text overlay tools.
npm install @fawadhs/image-toolsbash
npm install @fawadhs/image-tools
or
yarn add @fawadhs/image-tools
or
pnpm add @fawadhs/image-tools
`
🚀 Quick Start
`tsx
import { ImageTools } from '@fawadhs/image-tools';
import '@fawadhs/image-tools/styles';
function App() {
return (
Image Converter
);
}
`
📖 Usage Examples
$3
`tsx
import { ImageTools } from '@fawadhs/image-tools';
import '@fawadhs/image-tools/styles';
function AdminPanel() {
const handleComplete = (files) => {
console.log('Conversion complete!');
files.forEach(file => {
console.log(${file.originalName} → ${file.name});
// Upload to server, update database, etc.
uploadToServer(file.blob, file.name);
});
};
return (
maxFiles={50}
defaultFormat="webp"
defaultQuality={85}
onConversionComplete={handleComplete}
/>
);
}
`
$3
`tsx
'use client';
import { ImageTools } from '@fawadhs/image-tools';
import '@fawadhs/image-tools/styles';
export default function ImageEditorPage() {
return
}
`
$3
`tsx
import dynamic from 'next/dynamic';
import '@fawadhs/image-tools/styles';
const ImageTools = dynamic(
() => import('@fawadhs/image-tools').then(mod => mod.ImageTools),
{ ssr: false }
);
export default function Page() {
return
}
`
🎛️ Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| theme | 'light' \| 'dark' \| 'system' | 'system' | Theme mode |
| maxFiles | number | 50 | Maximum files allowed |
| defaultFormat | 'webp' \| 'jpeg' \| 'png' \| 'avif' | 'webp' | Default output format |
| defaultQuality | number | 85 | Default quality (1-100) |
| onConversionComplete | (files) => void | - | Callback when conversion completes |
| onFilesSelected | (count) => void | - | Callback when files are selected |
| className | string | - | Custom CSS class |
| features | object | - | Enable/disable specific features |
🎨 Styling
The component includes all necessary styles. Simply import the CSS file:
`tsx
import '@fawadhs/image-tools/styles';
`
For custom styling, wrap the component and override CSS classes:
`tsx
`
📝 TypeScript
Full TypeScript support with type definitions:
`typescript
import type {
ImageToolsProps,
SelectedFile,
OutputFormat,
ConvertOptions,
ImageTransform
} from '@fawadhs/image-tools';
``