@acctglobal/image-gallery NPM

Image Gallery

Getting Started

This component can be used anywhere you want in e-commerce, in a responsive and agnostic way. You just need to have React on your project.

On desktop

On mobile

obs: You can ignore the mobile layout. Just don't use the isMobile property.

Installation and usage

To use Image Gallery, you need to install the package via yarn or npm and import it wherever you want to use it.

yarn add @acctglobal/image-gallery
// or npm install

Now you just need to import and use the component.

import ImageGallery from '@acctglobal/image-gallery';

<ImageGallery
  images={images}
  defaultMainImageSizes={{ width: [200, 500], height: [200, 500] }}
  imageSelectorSizes={{ height: [30, 60], width: [30, 60] }}
/>

Styling

On your css file:

[data-sf-gallery-container] {
  ...yourStyles;
}

All attributes

data-sf-gallery-container data-sf-gallery-selector-container data-sf-gallery-selector-images-container data-sf-gallery-selector-button data-sf-gallery-selector-image data-sf-gallery-selector-image="selected" data-sf-selector-arrow data-sf-selector-arrow-backward data-sf-selector-arrow-forward data-sf-gallery-main-image-container data-sf-gallery-main-image

Props

Parameter	Type	Description
`images`	`Image[]`	Mandatory. Array of images to mount gallery. First image will be the main image.
`imageSelectorSizes`	`Size`	Mandatory. Object containing size of selector images.
`defaultMainImageSize`	`Size`	Mandatory. Object containing size of main image.
`isMobile`	`boolean`	Optional. Boolean that indicates if device size is mobile or not.
`CustomImageComponent`	`ComponentType<ImageComponent>`	Optional. Custom image component to used on main image. Need to be typed as `Image`. Can contain other optional properties.
`ArrowIcon`	`ReactNode`	Optional. Custom arrow component for image selector. Component have a default arrow. If you prefer to use an custom arrow, choose an up arrow.
`showArrow`	`boolean`	Optional. boolean that indicates if show arrow button horizontal.

Types

Size

Property	Type	Description
`width`	`number[mobile, desktop]`	Mandatory
`height`	`number[mobile, desktop]`	Mandatory

Image

Property	Type	Description
`url`	`string`	Mandatory
`alternateName`	`string`	Mandatory

ImageComponent

obs: acceps any other opitional properties.

Property	Type	Description
`src`	`string`	Mandatory
`alt`	`string`	Mandatory
`width`	`number`	Mandatory
`height`	`number`	Mandatory
`...otherProps`	`any`	Optional

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!