/react-photo-collage-task

Task

React Photo Collage Task

Image Props

Name Type Required
width number true
height number true
src string true

Component Props

Name Type Required Default Description
width number false 800 Ширина контейнера
maxRowHeight number false 100 Максимальная высота ряда
inline bool false false Если true, то картинки выстраиваются в ряд без коллажа с возможностью перехода на новый ряд
onDrag function false undefined Если есть функция, то коллаж должен быть редактируемым. Появляеться drag-and-drop. После того как пользователь "отпустил" картинку, вызывается callback: ```(int oldIndex, int newIndex, Image image): void```
margin number false 2 Отступ между картинками
rows number or function false undefined Количество рядов или функция которая будет возвращать количество рядов. ```(int containerWidth): int```. По умолчанию автоматически определять равномерное количество изображений в ряд.
images an array of Image true undefined Массив картинок. Тип картинки описан выше.

Usage

const props = {
  width: 800,
  maxRowHeight: 100,
  photos: [
    {
        width: 1024,
        height: 553,
        src: 'url/image-1.jpg',
    },
    {
        width: 483,
        height: 400,
        src: 'url/image-2.jpg',
    },
    {
        width: 500,
        height: 900,
        src: 'url/image-3.jpg',
    },
    ...
  ],
};

function App() {
  return (
    <ReactPhotoCollage {...props} />
  );
}