react-chakra-slide-show

React component for image slide

Usage no npm install needed!

<script type="module">
  import reactChakraSlideShow from 'https://cdn.skypack.dev/react-chakra-slide-show';
</script>

README

React Image Slide Example

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

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