Пакети / Зображення

@tykonpm/image-react

v0.5.1

<TykoImage>, вікно бібліотеки зображень, перегляд на весь екран із zoom і жестами.

$ npm i @tykonpm/image-react

npm Код Живі приклади Потребує: @tykonpm/image-core

tsx

import { TykoImage } from "@tykonpm/image-react";
<TykoImage entry={entry} alt="Portrait" width={320} height={320} />

Renders <img> with srcset/sizes from @tykonpm/image-core. Uses object-fit: contain by default, so portraits are never cropped. Lazy-loads by default.

useImageManifest(loader, srcs) reads entries through a shared createManifestLoader (cache, dedup).

Using in an AI / vibe-coding platform

Features, limitations and adapter recipes: AI-GUIDE.md in this package (node_modules/@tykonpm/image-react/AI-GUIDE.md).

ImageLibraryDialog

tsx

import { ImageLibraryDialog } from "@tykonpm/image-react";
<ImageLibraryDialog open={open} onClose={close} onSelect={(f) => use(f.url)} adapter={myLibraryAdapter} />

Tabs: Library (folders + thumbnails), Upload (drag & drop, optional prepare resize), URL. Thumbnails never crop. Adapter: MediaLibraryAdapter from @tykonpm/image-core; try createMemoryLibrary() for demos.