Neighbor's Preppy Maltese

    @acctglobal/image-gallery
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.3 • Public • Published

    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

    image

    On mobile

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

    image

    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

    Keywords

    none

    Install

    npm i @acctglobal/image-gallery

    DownloadsWeekly Downloads

    0

    Version

    0.4.3

    License

    MIT

    Unpacked Size

    106 kB

    Total Files

    28

    Last publish

    Collaborators

    • luiz.priolli
    • ricardo.freitas
    • fabioacct