CodeCraft Kit

@codecraftkit

Documentation

Image Gallery

Description#

The image grid and action is a component to create a image gallery, with the options to add more images or redirect to another page.

Import#

it can be imported from the core.

Code Example

import { ImageGallery } from "@codecraftkit/core";

or alone.

Code Example

import ImageGallery from "@codecraftkit/imagegallery";

Usage#

Dummy Data#

Code Example

const images = [
  {
      url: '/images/img1.jpg',
      ETag: "10b62dda684587e0d3940ac086ecee81",
  },{
      url: '/images/img2.jpg',
      ETag: "10b62dda684587e0d3940ac086ece1",
  },{
      url: '/images/img3.jpg',
      ETag: "10b62dda684587e0d3940ac086ece2",
  },{
      url: '/images/img4.jpg',
      ETag: "10b62dda684587e0d3940ac086ece3",
      agencyId: '1'
  },{
      url: '/images/img5.jpg',
      ETag: "10b62dda684587e0d3940ac086ece4",
      agencyId: '2'
  },{
      url: '/images/img6.jpg',
      ETag: "10b62dda684587e0d3940ac086ece5",
      agencyId: '2'
  },{
      url: '/images/img7.jpg',
      ETag: "10b62dda684587e0d3940ac086ece6",
      agencyId: '3'
  },
];

Simple Use#

Code Example

<ImageGallery images={images} />

Round Image#

Code Example

<ImageGallery roundImages noBorder images={images} />

Add Local Images#

The + button allow the user to add images and save them in the state

Just pass the state and submitState props

To allow remove no local image just pass removeAlbumImages or removeAgencyImages and the action removeImageAction

Code Example

function MyApp() {
  const [files,setFiles] = useState([])

  return <ImageGallery
      images={images}
      state={files}
      submitState={setFiles}
      limit={4}
      removeAlbumImages
      removeAgencyImages
      removeImageAction={(image)=>console.log(image)}
   />
}

Add Link#

Code Example

<ImageGallery
images={images}
route={'/example-query'}
_id={'123456'}
limit={4}
/>

Allow Select Images#

To select images pass selection, selected, setSelected and removeSelectedAction props

Code Example

function MyApp() {
const [selected,setSelected] = useState([]);

return <ImageGallery
  images={images}
  selection
  selected={selected}
  setSelected={setSelected}
  removeSelectedAction={(images)=>console.log(images)}
/>
}

Usage with Categories#

Dummy Data#

Code Example

const imagesInCategory = [
  {
    category: 'SunSet',
    items: [
      {
        url: 'images/img1.jpg',
        ETag: '10b62dda684587e0d3940ac086ecee81',
      }, {
        url: 'images/img2.jpg',
        ETag: '10b62dda684587e0d3940ac086ece1',
      }, {
        url: 'images/img3.jpg',
        ETag: '10b62dda684587e0d3940ac086ece2',
      },
    ]
  }, {
    category: 'Cars',
    items: [{
      url: 'images/img4.jpg',
      ETag: '10b62dda684587e0d3940ac086ece3',
      agencyId: '1'
    }, {
      url: 'images/img5.jpg',
      ETag: '10b62dda684587e0d3940ac086ece4',
      agencyId: '2'
    }, {
      url: 'images/img6.jpg',
      ETag: '10b62dda684587e0d3940ac086ece5',
      agencyId: '2'
    },]
  }, {
    category: 'No Category',
    items: [{
      url: 'images/img7.jpg',
      ETag: '10b62dda684587e0d3940ac086ece6',
      agencyId: '3'
    }]
  }
]

Example#

The ImageGallery is able to show the data in section in this case categories by passing the prop groupByCategory

Code Example

<ImageGallery
  images={imagesInCategory}
  groupByCategories
  sectionLabelField="category"
/>

Props#

name

type

required

default

description

Boolean

false

Show a loading Animation

images

Array<object>

yes

Array of objects that will be the no local images of the gallery

size

String

150px

Change the images size

limit

Number

limit the no local images

previewImageComponent

component

Custom component for the imagePreview from data it received the image,onClose,IsOpen as prop

previewLocalImageComponent

component

Custom component for the imagePreview from local images it received the image,onClose,IsOpen as prop

disablePreview

Boolean

false

Disable the image preview

submitState

SetState

Allow the user to submit images and show them in the gallery, set Files in its state

state

State

no, unless the prop “submitState“ is used

Save the files who submit the user

removeAlbumImages

Boolean

false

Enable remove global images

removeAgencyImages

Boolean

false

Enable remove agency images

removeImageAction

Function

no, unless the prop “removeAlbumImages“ or the prop “removeAgencyImages“ is used

Action when remove button is pressed

agencyImageIcon

Icon

Change agency Icon

route

String

Allow to redirect the user to another page with an id param

_id

String

no, unless the prop “route“ is used

Id param that will be placed in the route

selection

boolean

false

Allow to select many images

selected

State

no, unless the prop “selection“ is used

Save the images selected in this state

setSelected

SetState

no, unless the prop “selection“ is used

set the images selected in the state

removeSelectedAction

Function

no, unless the prop “selection“ is used

Action to remove selected images

filesToUploadWarning

Number

false

First tab index to be open when Tab Components render

convertFromFile

Boolean

false

if the images given are in type file it converts them into normal images

idImagesField

String

ETag

_id identifier for the images

sectionLabelField

String

label

in case of group by category get de category label

imagesField

String

items

in case of group by category get de images field

groupByCategories

Boolean

false

it divide the images in sections with labels

roundImages

Boolean

false

show round images

noBorder

Boolean

false

Remove images border and white background

noShadow

Boolean

false

Remove shadow

imagesStyles

Object

custom styles for the images

imagesGap

Number

2

grid images gap

gridStyles

object

custom grid styles

noHover

Boolean

false

Disable hover effect

customHover

Object

Add a custom hover effect

roundedHover

Boolean

false

Make the hover rounded

actions

array<objects>

Add a new custom button, When images are selected