# react-chakra-slide-show

> React component for image slide

Latest version **1.0.11** (published 2021-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-chakra-slide-show
pnpm add react-chakra-slide-show
yarn add react-chakra-slide-show
bun add react-chakra-slide-show
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2021-09-06 |
| First published | 2021-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Chalermchon Samana |
| Maintainers | adaydesign |
| Keywords | react, slide, component, chakra ui, image |

## Links

- npm: https://www.npmjs.com/package/react-chakra-slide-show
- Repository: https://github.com/adaydesign/react-image-slide-chakra
- Homepage: http://www.appcodemia.com
- Issues: https://github.com/adaydesign/react-image-slide-chakra/issues
- npm.io page: https://npm.io/package/react-chakra-slide-show

## Dependencies (12)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [framer-motion](https://npm.io/package/framer-motion.md) ^4.1.17
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.4.1
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.3.0
- [@chakra-ui/react](https://npm.io/package/@chakra-ui/react.md) ^1.6.7
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.11 (latest) — 2021-09-06
- 1.0.10 — 2021-09-06
- 1.0.9 — 2021-09-05
- 1.0.8 — 2021-09-05
- 1.0.7 — 2021-09-05
- 1.0.6 — 2021-09-05
- 1.0.4 — 2021-09-05
- 1.0.3 — 2021-09-05
- 1.0.2 — 2021-09-05
- 1.0.1 — 2021-09-05
- 1.0.0 — 2021-09-05

## README

# React Image Slide Example

- with Chakra UI
- npm : https://www.npmjs.com/package/react-chakra-slide-show

## 1. Install React and Chakra UI (v.1.6.7)
```
npx create-react-app my-app
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
```

## 2. Install This Package
```
npm i react-chakra-slide-show
```

## Example Code

```js
import { ChakraProvider } from '@chakra-ui/react'
import { ImageSlide } from 'react-chakra-slide-show'
import React, { useMemo } from 'react'

const App = () => {
  const images = useMemo(() => [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    'image4.jpg'
  ], [])

  const captions = useMemo(() => [
    'caption for image1.jpg',
    'caption for image2.jpg',
    'caption for image3.jpg',
    'caption for image4.jpg'
  ], [])

  return (
    <ChakraProvider>
      <ImageSlide images={images} captions={captions} />
    </ChakraProvider>
  )
}

export default App
```

## API

ImageSlide's properties

|Property|Type|M/O|Default|Description|
|---|---|---|---|---|
|images|string array|required||list of image path|
|captions|string array|required||list of image's caption|
|auto|int|optional|default: 5000|delay time, if 0 is not automatic change image|
|minH|string|optional|default: "500px"|image's height|

## Demo

https://appcodemia-react-slide.netlify.app

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