Carousel React components created using create-react-app by SW49GO

Presentation :

This is a reusable React component that allows you to display a customizable Carousel in your application.

The component is TypeScript compatible and includes a type definition file (CarouselReact.d.ts) for an improved development experience. In a TypeScript project, the TypeScript compiler will automatically use this definition file.

Examples Custom style :

Installing the package in your project:

npm i react-carousel-sw49go

Prerequisites :

• Node.js v18.16.0

Dependencies to install :

• "react": "^18.2.0"
• "react-dom": "^18.2.0"
• "prop-types": "^15.8.1"
• "react-icons": "^5.0.1"

Imported the component into your project:

import {CarouselReact } from 'react-carousel-sw49go'

function App() {
    // Resource list in an array:
        const pictures =  [
            "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-1.jpg",
            "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-2.jpg",
            "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-3.jpg",
            "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-4.jpg"
        ]

  return (
    <div className='yourStyleContainer'>
      <CarouselReact 
            photo={pictures} 
            outside={true} 
            heightContainer={'10rem'} 
            widthContainer={'85%'} 
            styleContainer={{border:'3px solid #000', paddingBottom:'1rem', backgroundColor:'#5f99dc'}} 
            styleNavIcon={{color:'#fff', fontSize:'1rem'}} 
            stylePaging={{color:'#fff'}}  
            reactIconRight={'FaArrowAltCircleRight'} 
            reactIconLeft={'FaArrowAltCircleLeft'}/>
    </div>
  )
}

export default App

Using the different component options (Props):

Props	Type	Description
photo	array	List of resource pictures
outside	boolean	Position of Icons & Pagination default : false
heigthContainer	string	Heigth of the container display
widthContainer	string	Width of the container display
paging	boolean	Allow to display the Pagination default : true
styleContainer	object	CSS Properties for the container
styleNavIcon	object	CSS Properties for the icons style
stylePaging	object	CSS Properties for the paging number style
reactIconRight	string	Name of Right icon from React Icons (Font Awesome 5) default icon : 'FaAngleRight'
reactIconLeft	string	Name of Left icon from React Icons (Font Awesome 5) default icon : 'FaAngleLeft'