1.2.3 • Published 2 years ago

gallereact v1.2.3

Weekly downloads
86
License
MIT
Repository
github
Last release
2 years ago

🖼 Gallereact - React slider

PRs Welcome code style: prettier npm bundle size Issues license Coverage Status

Gallereact is a complete ready to use gallery slider, with a lot of possible customizations. It works based on object-fit for img tags, which allows a better ratio management. Just styling the div that contains the component with a height and a width and the images will fit on that.

Getting started

npm install gallereact

You might need to to install styled-components as a peer dependency, and you're ready to go!

How to use

Check out the live demo here to get an idea on how it works!

Import the component Gallereact from the library and put it inside a container with a declared height and width. This is really important, Gallereact is designed to be completely customizable from the user side, so it will adapt itself perfectly to its container.

import Gallereact from 'gallereact';

function MyComponent () {
  const images = [
    'http://image.url/1', 
    'http://image.url/2', 
    'http://image.url/3'
  ];
                  
  return (
    <div style={{ width: '60vw', height: '80vh' }}>
      <Gallereact images={images} />
    </div>
  )
}

Props

Prop nameTypeDefaultRequiredDescription
inputIndexNumber-falseInput index to go to a specific slide.
autoPlayBooleanfalsefalseSlider auto play
durationNumber5000falseWhen auto play determines the transition duration
transitionBooleantruefalseAllow animated transition on slide change .
loopBooleantruefalseIf true, once reached the end it will re-start from the beginnign. Ignored if swipe is true.
coverBooleantruefalseBackground-Image style. If false the applied style is "contain".
swipeBooleanfalsefalseAllow Swipe action.
arrowOnHoverBooleanfalsefalseShow arrow on hover.
displayDotBooleantruefalseShow dots. If false slider will take the entire available height.
displayArrowBooleantruefalseShow Arrows.
displayPreviewBooleanfalsefalseShow preview of the images below the slider. If true it won't display the dots.
primaryColorString'#CCC'falseColor to apply on the default arrow and dot - must be valid color ('black', '#000', rgb(0,0,0)).
secondaryColorString'#333'falseColor to apply on the default active dot - must be valid color ('black', '#000', rgb(0,0,0)).
containerStyleObject-falseStyle to apply on the container.
slideStyleObject-falseStyle to apply on the single slide.
dotContainerStyleObject-falseStyle to apply on the container of the dots.
dotStyleObject-falseStyle to apply on the dots.
dotActiveStyleObject-falseStyle to apply on the active dot.
arrowStyleObject-falseStyle to apply on the arrows.
taglineStyleObject-falseStyle to apply on the tagline.
titleStyleObject-falseStyle to apply on the tagline title.
captionStyleObject-falseStyle to apply on the tagline caption.
previewStyleObject-falseStyle to apply on the preview images.
previewActiveStyleObject-falseStyle to apply on the active preview image.
arrowLeftImg.png|.svg-falseImage for the left arrow. It will accepts 'url', .jpeg, .png and .svg
arrowRightImg.png|.svg-falseImage for the right arrow. It will accepts 'url', .jpeg, .png and .svg
callbackFunction-falseCallback function on slide change @param {i}
imagesImage[]!-trueArray of objects of type Image.

Image

Prop nameTypeDefaultRequiredDescription
imageString!-trueUrl of the image
titleString-falseTitle of the image
captionString-falseCaption of the image

If you don't have any tagline you can pass just the url of the images.

Other examples

Custom Options

It's possible to pass options and style objects to customize the way you prefer.

<Gallereact
  images={[/* array of images */]} 
  swipe={true}
  displayArrows={false} 
  slideStyle={{
    width:"80%",
    height:"90%",
    margin:"5% 10%",  
    boxShadow:"0 2px 20px -1px #2222"
  }} 
  dotStyle={{
    width:"25px",
    height:"3px",
    borderRadius:0,
    margin:"0px"
  }}  
/>

Callback

You can pass a callback function that is going to be trigger every time that the slide changes. It will pass the current index as single parameter.

const [currentSlide, setCurrentSlide] = useState(0)

function onChangeSlide (i) {
  setCurrentSlide(i)
}

return (
  <div style={style.container}>
    <Gallereact 
      images={images} 
      callback={onChangeSlide}
      />
  </div>
)

Go to slide

You can control the slider passing the property inputIndex which will translate to the targeted slider.

const [index, setIndex] = useState(0)

function goToSlide () {
  setIndex(0)
}

return (
    <div style={style.container}>
      <Gallereact 
        images={images} 
        inputIndex={index}
      />
    	<button onClick={goToSlide}> Back to first slide</button>
    </div>
  )

Contributing

To contribute please read the CONTRIBUTING.md

Contributors

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

1.2.3

2 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.18

5 years ago

1.0.17

5 years ago

1.0.16

5 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago