# react-image-show

> React image slide show, support fixed or dynamic images height

Latest version **0.3.4** (published 2019-04-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-image-show
pnpm add react-image-show
yarn add react-image-show
bun add react-image-show
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.4 |
| Published | 2019-04-29 |
| First published | 2017-09-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 27 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Quan Lieu |
| Maintainers | quanlieu |
| Keywords | react, carousel, react-component, react-carousel, react-slideshow, react-gallery, react carousel, react slide show, react gallery, image gallery, image slide, slide show, gallery, slide |

## Links

- npm: https://www.npmjs.com/package/react-image-show
- Repository: https://github.com/quanlieu/react-image-show
- Homepage: https://github.com/quanlieu/react-image-show#readme
- Issues: https://github.com/quanlieu/react-image-show/issues
- npm.io page: https://npm.io/package/react-image-show

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.3.4 (latest) — 2019-04-29
- 0.2.4 — 2018-02-27
- 0.2.3 — 2017-10-19
- 0.1.3 — 2017-09-25
- 0.1.2 — 2017-09-25
- 0.1.1 — 2017-09-25
- 0.1.0 — 2017-09-25

## README

# React image show

Simple React images slide show (carousel)

## Install

`npm i react-image-show`

## Demo

Check out demo [online](https://quanlieu.github.io/react-image-show/)

## Example

```js
import React from 'react';
import SlideShow from 'react-image-show';

class MyComponent extends React.Component {
  render() {
    return (
      <SlideShow
        images={urlArray}
        width="920px"
        imagesWidth="800px"
        imagesHeight="450px"
        imagesHeightMobile="56vw"
        thumbnailsWidth="920px"
        thumbnailsHeight="12vw"
        indicators thumbnails fixedImagesHeight
      />
    );
  }

}
```

##  Props

|      Property     |  Type  |          Description          | Default |
| ----------------  | ------ |          -----------          | ------- |
| images            | array   | Array of images URL | none |
| fixedImagesHeight  | bool   | Enables fixed images height mode, fit height and then crop width to main aspect ratio, too narrow images will be center and arrow key navigation | false |
| infinite           | bool   | Enable infinite scrolling mode | false |
| indicators         | bool   | Show indicator | false |
| thumbnails         | bool   | Show thumbnails | false |
| arrows             | bool   | Show arrows | true |
| width              | string | Horizontal width of the carousel, include arrows, no apply in mobile mode, always 100% | 920px |
| imagesWidth        | string | Horizontal width of the image inside carousel, exclude arrows, always 100% on mobile | 800px |
| imagesHeight       | string | Height of the images when fixedImagesHeight is set | 450px |
| imagesHeightMobile | string | Height of the images on mobile when fixedImagesHeight is set | 56vw |
| thumbnailsWidth   | string | Horizontal width of the thumbnails strip, always 100% on mobile | 920px |
| thumbnailsHeight  | string | Height of thumbnails strip width of the carousel | 12vw |
| onImageClick      | function | Image click callback | undefined |

##  Polyfill

For IE = 10, need dataset polyfill.
Check out [Moderndize Wiki page](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)

---
_Source: https://npm.io/package/react-image-show · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._