Photo grid
A profile's photos in slots: the first is the main one, empty slots invite to add, photos reorder by drag (web), by their menu (React Native) or by buttons — every move announced.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
When to use
- A dating profile's photos, the first one shown first.
- A product's gallery to order before publishing.
When not to use
- To pick the files themselves.Use instead: Media picker
- To show photos full screen.Use instead: Image viewer
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { PhotoGrid } from "@krizaka/ui/photo-grid";Examples
Profile photos
Three photos, the first main, two required.
Props
A profile's photos in slots: drag to reorder, or each photo's buttons (earlier, later, remove), every move announced.
| Prop | Type | Default | Description |
|---|---|---|---|
labelsrequired | PhotoGridLabels | — | The words, passed translated. |
onValueChangerequired | (photos: GridPhoto[]) => void | — | Called with the new order, or without a removed photo. |
valuerequired | readonly GridPhoto[] | — | The photos, in order: the first is the main one. |
className | string | — | Classes merged on the root. |
columns | number | 3 | Columns. Default 3. |
onAdd | (() => void) | — | Called by an empty slot: open the file picker, the camera, the editor. |
required | number | 1 | Fewest photos required: the empty slots up to it are marked. Default 1. |
slots | number | 6 | How many slots. Default 6. |
Accessibility
- Each photo is named by its position and words, the main one says so.
- Every move is announced; React Native offers the same moves as accessibility actions.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves through the photos and their buttons (earlier, later, remove). |
Best practices
- Mark the required slots (
required). - Open the
MediaPicker, the camera or theMediaEditorfromonAdd, then add what comes back.
Related components
Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Media picker
Photos and videos picked from the library or the camera, as a grid of tiles with a remove button and a count.
Terminal replay
A terminal session played back: each command typed at the prompt, its output line by line, the screen following the last line — or the whole session at rest, as the server renders it.