inital commit for real
jeremy
parent
769a79adc0
commit
dc161603af
|
|
@ -0,0 +1,187 @@
|
||||||
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
|
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A responsive carousel component that displays a list of children in a sliding manner.
|
||||||
|
* It supports various features such as auto-play, pause on hover, navigation buttons, and responsive design.
|
||||||
|
*
|
||||||
|
* @param {ReactNode[]} children - The list of children to be displayed in the carousel.
|
||||||
|
* @param {number} limit - The maximum number of children to be displayed in a single slide.
|
||||||
|
* @param {number} [mdLimit] - The maximum number of children to be displayed in a single slide on medium-sized screens.
|
||||||
|
* @param {number} [smLimit] - The maximum number of children to be displayed in a single slide on small-sized screens.
|
||||||
|
* @param {number} [lgLimit] - The maximum number of children to be displayed in a single slide on large-sized screens.
|
||||||
|
* @param {string} [title] - The title of the carousel.
|
||||||
|
* @param {string} [bgImg] - The background image of the carousel.
|
||||||
|
* @param {number} [autoAdvanceInterval] - The interval at which the carousel auto-advances.
|
||||||
|
* @param {boolean} [pauseOnHover] - Whether the carousel should pause on hover.
|
||||||
|
* @param {boolean} [autoPlay] - Whether the carousel should auto-play.
|
||||||
|
* @param {string} [arrowPosition] - The position of the navigation arrows.
|
||||||
|
* @param {boolean} [showArrows] - Whether to show the navigation arrows.
|
||||||
|
* @param {string} [border] - The border style of the carousel.
|
||||||
|
* @param {boolean} [showNavigation] - Whether to show the navigation buttons.
|
||||||
|
* @param {string} [gap] - The gap between the children.
|
||||||
|
* @param {string} [bg] - The background color of the carousel.
|
||||||
|
* @param {string} [px] - The padding x of the carousel.
|
||||||
|
* @param {string} [py] - The padding y of the carousel.
|
||||||
|
* @return {JSX.Element} The carousel component.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const useInterval = (callback, delay) => {
|
||||||
|
const savedCallback = useRef();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
savedCallback.current = callback;
|
||||||
|
}, [callback]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const tick = () => {
|
||||||
|
savedCallback.current();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (delay !== null) {
|
||||||
|
const id = setInterval(tick, delay);
|
||||||
|
return () => clearInterval(id);
|
||||||
|
}
|
||||||
|
}, [delay]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ResponsiveCarousel = ({
|
||||||
|
children,
|
||||||
|
limit,
|
||||||
|
mdLimit,
|
||||||
|
smLimit,
|
||||||
|
lgLimit,
|
||||||
|
title,
|
||||||
|
bgImg,
|
||||||
|
autoAdvanceInterval,
|
||||||
|
pauseOnHover,
|
||||||
|
autoPlay,
|
||||||
|
arrowPosition,
|
||||||
|
showArrows,
|
||||||
|
border,
|
||||||
|
showNavigation,
|
||||||
|
gap,
|
||||||
|
bg,
|
||||||
|
px,
|
||||||
|
py,
|
||||||
|
}) => {
|
||||||
|
const [currentSlide, setCurrentSlide] = useState(0);
|
||||||
|
const slideCount = Math.ceil(children.length / limit);
|
||||||
|
const [isPlaying, setIsPlaying] = useState(autoPlay);
|
||||||
|
const [updatedLimit, setUpdatedLimit] = useState(limit);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const updateLimit = () => {
|
||||||
|
if (window.innerWidth >= 1280) {
|
||||||
|
setUpdatedLimit(lgLimit || limit);
|
||||||
|
} else if (window.innerWidth >= 768) {
|
||||||
|
setUpdatedLimit(mdLimit || limit);
|
||||||
|
} else {
|
||||||
|
setUpdatedLimit(smLimit || limit);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
updateLimit();
|
||||||
|
window.addEventListener("resize", updateLimit);
|
||||||
|
return () => window.removeEventListener("resize", updateLimit);
|
||||||
|
}, [limit, mdLimit, smLimit, lgLimit]);
|
||||||
|
|
||||||
|
const chunkedChildren = Array.from({ length: slideCount }, (_, i) =>
|
||||||
|
children.slice(i * updatedLimit, (i + 1) * updatedLimit)
|
||||||
|
);
|
||||||
|
|
||||||
|
// console.log("border: ", border != "none" ? border + "px" : border);
|
||||||
|
const prevSlide = () => {
|
||||||
|
setCurrentSlide((prevSlide) =>
|
||||||
|
prevSlide === 0 ? slideCount - 1 : prevSlide - 1
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const nextSlide = () => {
|
||||||
|
setCurrentSlide((prevSlide) =>
|
||||||
|
prevSlide === slideCount - 1 ? 0 : prevSlide + 1
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (autoPlay) {
|
||||||
|
const id = setInterval(() => {
|
||||||
|
if (isPlaying) {
|
||||||
|
nextSlide();
|
||||||
|
}
|
||||||
|
}, autoAdvanceInterval);
|
||||||
|
|
||||||
|
return () => clearInterval(id);
|
||||||
|
}
|
||||||
|
}, [autoPlay, autoAdvanceInterval, isPlaying]);
|
||||||
|
|
||||||
|
const handleMouseEnter = () => {
|
||||||
|
if (pauseOnHover) {
|
||||||
|
setIsPlaying(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const RenderButtons = () => {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<button
|
||||||
|
onClick={prevSlide}
|
||||||
|
className="bg-white/40 hover:bg-gray-100 text-gray-dark font-bold py-2 px-2 "
|
||||||
|
>
|
||||||
|
<FaChevronLeft />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={nextSlide}
|
||||||
|
className="bg-white/40 hover:bg-gray-100 text-gray-dark font-bold py-2 px-2 "
|
||||||
|
>
|
||||||
|
<FaChevronRight />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseLeave = () => {
|
||||||
|
if (pauseOnHover) {
|
||||||
|
setIsPlaying(autoPlay);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{title && (
|
||||||
|
<div className={"w-full text-base flex justify-between "}>
|
||||||
|
<div id="title" className="bg-white text-sm uppercase">
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showArrows && <RenderButtons position="topRight" />}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className={`bg-${bg} px-${px} py-${py} flex border border-${
|
||||||
|
border != "none" ? border + "px" : border
|
||||||
|
} border-gray-200 justify-evenly items-center overflow-hidden w-full relative mx-auto`}
|
||||||
|
onMouseEnter={handleMouseEnter}
|
||||||
|
onMouseLeave={handleMouseLeave}
|
||||||
|
>
|
||||||
|
<div className={`w-full flex justify-evenly gap-${gap}`}>
|
||||||
|
{chunkedChildren.map((chunk, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`flex w-full justify-evenly gap-${gap} transition-transform duration-500 ${
|
||||||
|
index !== currentSlide ? "absolute" : ""
|
||||||
|
} ${
|
||||||
|
index === currentSlide
|
||||||
|
? "translate-x-0"
|
||||||
|
: index < currentSlide
|
||||||
|
? "-translate-x-full"
|
||||||
|
: "translate-x-full"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{chunk}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ResponsiveCarousel;
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
# ResponsiveCarousel.jsx
|
||||||
|
=========================
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
------------
|
||||||
|
|
||||||
|
ResponsiveCarousel is a flexible and customizable carousel component built with React. It is designed to work seamlessly across various devices and screen sizes, providing a responsive and engaging user experience.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
------------
|
||||||
|
|
||||||
|
* **Responsive Design**: The carousel adapts to different screen sizes and devices, ensuring a consistent and optimal viewing experience.
|
||||||
|
* **Customizable**: Easily customize the carousel's appearance, behavior, and layout to fit your specific needs.
|
||||||
|
* **Touch and Swipe Support**: Supports touch and swipe gestures for navigating through the carousel on mobile devices.
|
||||||
|
* **Keyboard Navigation**: Allows users to navigate through the carousel using their keyboard.
|
||||||
|
* **Auto-Play and Pause**: Automatically plays the carousel and pauses on hover or when the user interacts with it.
|
||||||
|
|
||||||
|
## Props
|
||||||
|
------------
|
||||||
|
|
||||||
|
The following props are available for customizing the ResponsiveCarousel component:
|
||||||
|
|
||||||
|
### Required Props
|
||||||
|
|
||||||
|
* **children**: The content to be displayed within the carousel. This can be a single element or an array of elements.
|
||||||
|
|
||||||
|
### Optional Props
|
||||||
|
|
||||||
|
* **limit**: The maximum number of items to display within the carousel at a given time. Defaults to 3.
|
||||||
|
* **mdLimit**: The maximum number of items to display within the carousel on medium-sized screens. Defaults to 4.
|
||||||
|
* **smLimit**: The maximum number of items to display within the carousel on small-sized screens. Defaults to 2.
|
||||||
|
* **lgLimit**: The maximum number of items to display within the carousel on large-sized screens. Defaults to 5.
|
||||||
|
* **title**: The title of the carousel. Defaults to an empty string.
|
||||||
|
* **bgImg**: The background image of the carousel. Defaults to an empty string.
|
||||||
|
* **autoAdvanceInterval**: The interval at which the carousel automatically advances. Defaults to 3000 milliseconds.
|
||||||
|
* **pauseOnHover**: Whether the carousel should pause when the user hovers over it. Defaults to true.
|
||||||
|
* **autoPlay**: Whether the carousel should automatically play. Defaults to true.
|
||||||
|
* **arrowPosition**: The position of the navigation arrows. Defaults to "center".
|
||||||
|
* **showArrows**: Whether to display the navigation arrows. Defaults to true.
|
||||||
|
* **border**: The border style of the carousel. Defaults to "solid 1px #ccc".
|
||||||
|
* **showNavigation**: Whether to display the navigation buttons. Defaults to true.
|
||||||
|
* **gap**: The gap between items within the carousel. Defaults to "10px".
|
||||||
|
* **bg**: The background color of the carousel. Defaults to "#fff".
|
||||||
|
* **px**: The padding x of the carousel. Defaults to "20px".
|
||||||
|
* **py**: The padding y of the carousel. Defaults to "10px".
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
-----
|
||||||
|
|
||||||
|
To use the ResponsiveCarousel component, simply import it into your React application and pass in the required props.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react';
|
||||||
|
import ResponsiveCarousel from './ResponsiveCarousel';
|
||||||
|
|
||||||
|
const MyComponent = () => {
|
||||||
|
const carouselChildren = [
|
||||||
|
<div key={1}>Child 1</div>,
|
||||||
|
<div key={2}>Child 2</div>,
|
||||||
|
<div key={3}>Child 3</div>,
|
||||||
|
<div key={4}>Child 4</div>,
|
||||||
|
<div key={5}>Child 5</div>,
|
||||||
|
<div key={6}>Child 6</div>,
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ResponsiveCarousel
|
||||||
|
children={carouselChildren}
|
||||||
|
limit={3}
|
||||||
|
mdLimit={4}
|
||||||
|
smLimit={2}
|
||||||
|
lgLimit={5}
|
||||||
|
title="My Carousel"
|
||||||
|
bgImg="https://example.com/background.jpg"
|
||||||
|
autoAdvanceInterval={3000}
|
||||||
|
pauseOnHover={true}
|
||||||
|
autoPlay={true}
|
||||||
|
arrowPosition="center"
|
||||||
|
showArrows={true}
|
||||||
|
border="solid 1px #ccc"
|
||||||
|
showNavigation={true}
|
||||||
|
gap="10px"
|
||||||
|
bg="#fff"
|
||||||
|
px="20px"
|
||||||
|
py="10px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MyComponent;
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
{
|
||||||
|
"name": "re-comp-lib",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "re-comp-lib",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"react-icons": "^5.3.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/js-tokens": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/loose-envify": {
|
||||||
|
"version": "1.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||||
|
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"loose-envify": "cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react": {
|
||||||
|
"version": "18.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||||
|
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"loose-envify": "^1.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-icons": {
|
||||||
|
"version": "5.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
|
||||||
|
"integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "*"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"name": "re-comp-lib",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A lib of react components",
|
||||||
|
"main": "null",
|
||||||
|
"scripts": {
|
||||||
|
"test": "vitest"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"components",
|
||||||
|
"lib"
|
||||||
|
],
|
||||||
|
"author": "Jeremy Hayes",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"react-icons": "^5.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue