@acctglobal/image-gallery

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.

How the component looks like:

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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request
6. And don't forget to update the changelog

Contact

Raphael Marinho - raphael.marinho@acct.global