1.0.11 • Published 3 years ago

react-chakra-slide-show v1.0.11

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

PropertyTypeM/ODefaultDescription
imagesstring arrayrequiredlist of image path
captionsstring arrayrequiredlist of image's caption
autointoptionaldefault: 5000delay time, if 0 is not automatic change image
minHstringoptionaldefault: "500px"image's height

Demo

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