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 + MobileBetaMedia

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Yasakia's people screens (PY3/PY4) and Orochia's creator pages.

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 tailwindcss

Styles

@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
`labels`required	`PhotoGridLabels`	—	The words, passed translated.
`onValueChange`required	`(photos: GridPhoto[]) => void`	—	Called with the new order, or without a removed photo.
`value`required	`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 the MediaEditor from onAdd, then add what comes back.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub