Rearrange Images

Getting started

Installation

npm i rearrange-images

Usage

Syntax

import ImageArranger from "rearrange-images";

  const [images, setImages] = useState([
    { url: 'https://example.com/image1.jpeg' },
    {
      url: 'https://example.com/image2.jpeg',
    },
    ...
  ]);

<ImageArranger
  width={80}
  height={80}
  images={images}
  getUpdatedImages={(data) => setImages(data)}
/>

• className(optional)

  • Type: string
  • className to apply CSS styles.

• width(optional)

  • Type: number
  • The Width of the images will be shown on the UI.

• height (optional)

  • Type: number
  • The Height of the images will be shown on the UI.

• images

  • Type: Array of Object
  • Images data to show and re-arrange.

• getUpdatedImages

  • Type: function
  • Function which will return an updated list of arranged images.

Example

import React, { useState } from "react";

import { render } from "react-dom";

import ImageRearranger from "rearrange-images";

import "./style.css";

function App() {
  const [images, setImages] = useState([
    {
      url: "https://example/images/188544-9126.jpg",
    },

    {
      url: "https://example/images/arrang-img.jpeg",
    },
  ]);

  return (
    <div>
      <ImageRearranger
        width={200}
        height={250}
        className="image-style"
        images={images}
        getUpdatedImages={(data) => setImages(data)}
      />

      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

export default App;

style.css

.image-style {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}


.image-style > img {
  border-radius: 5px;
}