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!

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 - [email protected]