Easy Camera React

A lightweight React component for capturing images from the camera, selecting images from the gallery, cropping, previewing, and returning the image as a File, Blob, or Base64 string.

Features

• 📷 Camera Capture
• 🖼️ Gallery Image Picker
• ✂️ Image Crop
• 👀 Image Preview
• 📱 Mobile & Desktop Support
• 🔄 Switch Front/Back Camera
• 📦 TypeScript Support
• ⚛️ React 18 & React 19 Compatible
• 🎨 Customizable UI

Installation

npm install easy-camera-react

or

yarn add easy-camera-react

or

pnpm add easy-camera-react

Import

import { EasyCamera } from "easy-camera-react";
import "easy-camera-react/style.css";

Basic Example

import { useState } from "react";
import { EasyCamera } from "easy-camera-react";
import "easy-camera-react/style.css";

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>
        Open Camera
      </button>

      <EasyCamera
        open={open}
        onClose={() => setOpen(false)}
        onChange={(image) => {
          console.log(image);
        }}
      />
    </>
  );
}

export default App;

Full Example

<EasyCamera
    open={open}
    onClose={() => setOpen(false)}

    allowCamera
    allowGallery

    isCrop

    aspect={1}

    cropWidth={500}
    cropHeight={500}

    quality={0.9}

    returnType="file"

    facingMode="environment"

    showPreview

    allowSwitchCamera

    title="Select Image"

    onChange={(result) => {
        console.log(result);
    }}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | open | boolean | false | Open dialog | | onClose | () => void | - | Close dialog | | onChange | (result) => void | - | Image callback | | allowCamera | boolean | true | Enable camera | | allowGallery | boolean | true | Enable gallery | | isCrop | boolean | true | Enable crop | | aspect | number | 1 | Crop aspect ratio | | cropWidth | number | 500 | Crop width | | cropHeight | number | 500 | Crop height | | quality | number | 0.9 | Image quality | | facingMode | "user" | "environment" | environment | Camera direction | | allowSwitchCamera | boolean | true | Show switch camera button | | showPreview | boolean | true | Show preview dialog | | title | string | Select Image | Dialog title | | returnType | "file" | "blob" | "base64" | file | Output format |

Returned Object

interface EasyCameraResult {
    file?: File;
    blob?: Blob;
    base64?: string;

    width: number;
    height: number;

    size: number;
    mimeType: string;
}

Example

onChange={(image) => {

    console.log(image.file);

    console.log(image.blob);

    console.log(image.base64);

}}

Output Types

File

returnType="file"

Blob

returnType="blob"

Base64

returnType="base64"

Browser Support

• Chrome
• Edge
• Firefox
• Safari
• Android Chrome
• iOS Safari

Requirements

• React 18+
• ReactDOM 18+
• Modern browser with Camera API support

License

MIT

Author

Boopathi

Issues

Please report bugs or request features through the GitHub Issues page.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Changelog

v1.0.0

• Initial Release
• Camera Capture
• Gallery Picker
• Image Crop
• Image Preview
• TypeScript Support
• React 18 & React 19 Support