Package Exports

tectonic_camera
tectonic_camera/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tectonic_camera) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tectonic_camera

A minimal React hook for capturing high-quality photos using the native device camera (no live preview).
Developers have full control over UI, styling, and state management.

Features

Opens the native camera app (front or back)
No fixed UI → you control buttons and styling
Get the image as a File for storing in state, uploading, etc.
Works on mobile browsers (desktop falls back to file picker)
Zero dependencies, lightweight

Installation

npm install tectonic_camera

Usage

import { useState } from "react"
import { useTectonicCamera } from "tectonic_camera"

function App() {
  const [photo, setPhoto] = useState<File | null>(null)

  const { openCamera, CameraInput } = useTectonicCamera({
    captureMode: "environment", // "user" (front), "environment" (rear), or undefined
    onCapture: (file) => setPhoto(file)
  })

  return (
    <div>
      {/* Hidden input */}
      <CameraInput />

      {/* Developer controls buttons */}
      <button onClick={openCamera}>Open Camera</button>

      {photo && (
        <div>
          <img
            src={URL.createObjectURL(photo)}
            alt="preview"
            style={{ maxWidth: "300px", marginTop: "10px" }}
          />
          <button onClick={() => setPhoto(null)}>Remove Photo</button>
        </div>
      )}
    </div>
  )
}

API

useTectonicCamera(options)

Options

captureMode?: "user" | "environment" Which camera to open (defaults to "environment").
onCapture: (file: File) => void Callback when a photo is taken.

Returns

openCamera: () => void → Call this to trigger the camera
CameraInput: React.FC → Hidden <input> element (must be rendered once)