@veeyaainnovatives/carousel 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +184 -0
- package/dist/index.esm.js +80 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +85 -0
- package/dist/index.js.map +1 -0
- package/package.json +57 -0
package/README.md
ADDED
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
# @veeyaainnovatives/carousel
|
|
2
|
+
|
|
3
|
+
A reusable Hero Carousel component with background images and customizable content for React applications.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🎠Hero carousel/slider with background images
|
|
8
|
+
- 🎨 Customizable content (title, description, buttons)
|
|
9
|
+
- 📱 Fully responsive design
|
|
10
|
+
- 🔧 Flexible slide configuration
|
|
11
|
+
- 💅 Customizable styling via CSS classes
|
|
12
|
+
- 🎯 Support for HTML/JSX in titles
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @veeyaainnovatives/carousel
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Peer Dependencies
|
|
21
|
+
|
|
22
|
+
This package requires the following peer dependencies:
|
|
23
|
+
|
|
24
|
+
- `react` (^16.8.0 || ^17.0.0 || ^18.0.0)
|
|
25
|
+
- `react-dom` (^16.8.0 || ^17.0.0 || ^18.0.0)
|
|
26
|
+
- `react-bootstrap` (^2.0.0)
|
|
27
|
+
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
### Basic Example
|
|
31
|
+
|
|
32
|
+
```jsx
|
|
33
|
+
import { HeroCarousel } from '@veeyaainnovatives/carousel';
|
|
34
|
+
|
|
35
|
+
function App() {
|
|
36
|
+
const slides = [
|
|
37
|
+
{
|
|
38
|
+
id: 1,
|
|
39
|
+
image: "/path/to/image1.jpg",
|
|
40
|
+
title: "Welcome to Our Site",
|
|
41
|
+
description: "This is a description of the first slide.",
|
|
42
|
+
buttonText: "Get Started",
|
|
43
|
+
buttonOnClick: () => console.log('Get Started clicked'),
|
|
44
|
+
interval: 3000
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
id: 2,
|
|
48
|
+
image: "/path/to/image2.jpg",
|
|
49
|
+
title: "Second Slide",
|
|
50
|
+
description: "This is a description of the second slide.",
|
|
51
|
+
buttonText: "Learn More",
|
|
52
|
+
buttonOnClick: () => console.log('Learn More clicked'),
|
|
53
|
+
interval: 3000
|
|
54
|
+
}
|
|
55
|
+
];
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<HeroCarousel slides={slides} />
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Advanced Example with HTML in Title
|
|
64
|
+
|
|
65
|
+
```jsx
|
|
66
|
+
import { HeroCarousel } from '@veeyaainnovatives/carousel';
|
|
67
|
+
|
|
68
|
+
function App() {
|
|
69
|
+
const slides = [
|
|
70
|
+
{
|
|
71
|
+
id: 1,
|
|
72
|
+
image: "/path/to/image1.jpg",
|
|
73
|
+
title: 'Welcome to Our <strong class="theme-color-tan">Amazing</strong> Site',
|
|
74
|
+
description: "This is a description with highlighted text.",
|
|
75
|
+
buttonText: "Get Started",
|
|
76
|
+
buttonOnClick: () => handleClick(),
|
|
77
|
+
interval: 5000
|
|
78
|
+
}
|
|
79
|
+
];
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<HeroCarousel
|
|
83
|
+
slides={slides}
|
|
84
|
+
className="custom-carousel"
|
|
85
|
+
titleClassName="custom-title"
|
|
86
|
+
descriptionClassName="custom-description"
|
|
87
|
+
/>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Custom Content Rendering
|
|
93
|
+
|
|
94
|
+
```jsx
|
|
95
|
+
import { HeroCarousel } from '@veeyaainnovatives/carousel';
|
|
96
|
+
|
|
97
|
+
function App() {
|
|
98
|
+
const slides = [/* ... */];
|
|
99
|
+
|
|
100
|
+
const renderCustomContent = (slide, index) => {
|
|
101
|
+
return (
|
|
102
|
+
<div>
|
|
103
|
+
<h1 className="custom-title">{slide.title}</h1>
|
|
104
|
+
<p className="custom-description">{slide.description}</p>
|
|
105
|
+
<button onClick={slide.buttonOnClick}>
|
|
106
|
+
{slide.buttonText}
|
|
107
|
+
</button>
|
|
108
|
+
</div>
|
|
109
|
+
);
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
return (
|
|
113
|
+
<HeroCarousel
|
|
114
|
+
slides={slides}
|
|
115
|
+
renderCustomContent={renderCustomContent}
|
|
116
|
+
/>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Props
|
|
122
|
+
|
|
123
|
+
| Prop | Type | Required | Default | Description |
|
|
124
|
+
|------|------|----------|---------|-------------|
|
|
125
|
+
| `slides` | `array` | Yes | `[]` | Array of slide objects |
|
|
126
|
+
| `slides[].id` | `string\|number` | No | `index` | Unique identifier for slide |
|
|
127
|
+
| `slides[].image` | `string` | Yes | - | Background image URL or path |
|
|
128
|
+
| `slides[].title` | `string\|JSX` | No | - | Slide title (supports HTML with `<strong>` tags) |
|
|
129
|
+
| `slides[].description` | `string` | No | - | Slide description text |
|
|
130
|
+
| `slides[].buttonText` | `string` | No | - | Button text |
|
|
131
|
+
| `slides[].buttonOnClick` | `function` | No | - | Button click handler |
|
|
132
|
+
| `slides[].interval` | `number` | No | `null` | Auto-play interval in milliseconds (null = no auto-play) |
|
|
133
|
+
| `className` | `string` | No | `''` | Additional CSS classes for carousel container |
|
|
134
|
+
| `overlayClassName` | `string` | No | `'overlay'` | CSS classes for overlay div |
|
|
135
|
+
| `contentClassName` | `string` | No | `'carousel-content'` | CSS classes for content section |
|
|
136
|
+
| `titleClassName` | `string` | No | `'home-title'` | CSS classes for title |
|
|
137
|
+
| `descriptionClassName` | `string` | No | `'home-desc'` | CSS classes for description |
|
|
138
|
+
| `renderCustomContent` | `function` | No | - | Custom content render function `(slide, index) => JSX` |
|
|
139
|
+
|
|
140
|
+
## Slide Data Structure
|
|
141
|
+
|
|
142
|
+
```js
|
|
143
|
+
{
|
|
144
|
+
id: 1, // Optional: unique identifier
|
|
145
|
+
image: "/path/to/image.jpg", // Required: background image
|
|
146
|
+
title: "Slide Title", // Optional: title text or HTML
|
|
147
|
+
description: "Description text", // Optional: description
|
|
148
|
+
buttonText: "Click Me", // Optional: button text
|
|
149
|
+
buttonOnClick: () => {}, // Optional: button click handler
|
|
150
|
+
interval: 3000 // Optional: auto-play interval (ms)
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## Styling
|
|
155
|
+
|
|
156
|
+
The component uses the following default CSS classes:
|
|
157
|
+
|
|
158
|
+
- `.carousel-bg-img` - Background image container
|
|
159
|
+
- `.overlay` - Overlay div (customizable via `overlayClassName`)
|
|
160
|
+
- `.carousel-content` - Content wrapper (customizable via `contentClassName`)
|
|
161
|
+
- `.home-content-section` - Content section
|
|
162
|
+
- `.home-title` - Title heading (customizable via `titleClassName`)
|
|
163
|
+
- `.home-desc` - Description text (customizable via `descriptionClassName`)
|
|
164
|
+
|
|
165
|
+
You can override these styles or add custom classes using the className props. Make sure to include your CSS styles in your application.
|
|
166
|
+
|
|
167
|
+
## Title with Highlighted Text
|
|
168
|
+
|
|
169
|
+
You can use HTML in the title to highlight specific words:
|
|
170
|
+
|
|
171
|
+
```jsx
|
|
172
|
+
title: 'Welcome to Our <strong class="theme-color-tan">Amazing</strong> Site'
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
The component will parse the HTML and render `<strong>` tags with their classes correctly.
|
|
176
|
+
|
|
177
|
+
## License
|
|
178
|
+
|
|
179
|
+
MIT
|
|
180
|
+
|
|
181
|
+
## Author
|
|
182
|
+
|
|
183
|
+
[Veeyaa Innovatives](https://www.veeyaainnovatives.com)
|
|
184
|
+
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Carousel, Container, Button } from 'react-bootstrap';
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
const HeroCarousel = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
slides = [],
|
|
8
|
+
className = '',
|
|
9
|
+
overlayClassName = 'overlay',
|
|
10
|
+
contentClassName = 'carousel-content',
|
|
11
|
+
titleClassName = 'home-title',
|
|
12
|
+
descriptionClassName = 'home-desc',
|
|
13
|
+
renderCustomContent
|
|
14
|
+
} = _ref;
|
|
15
|
+
if (!slides || slides.length === 0) {
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
return /*#__PURE__*/jsx(Carousel, {
|
|
19
|
+
className: className,
|
|
20
|
+
children: slides.map((slide, index) => /*#__PURE__*/jsx(Carousel.Item, {
|
|
21
|
+
interval: slide.interval !== undefined ? slide.interval : null,
|
|
22
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
23
|
+
className: "carousel-bg-img",
|
|
24
|
+
style: {
|
|
25
|
+
backgroundImage: "url(".concat(slide.image, ")")
|
|
26
|
+
},
|
|
27
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
28
|
+
className: overlayClassName
|
|
29
|
+
}), /*#__PURE__*/jsx("div", {
|
|
30
|
+
className: contentClassName,
|
|
31
|
+
children: /*#__PURE__*/jsxs(Container, {
|
|
32
|
+
className: "position-relative",
|
|
33
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
34
|
+
className: "clearfix pt-md-5 mt-md-5 d-md-block d-lg-none d-none"
|
|
35
|
+
}), /*#__PURE__*/jsx("div", {
|
|
36
|
+
className: "home-content-section",
|
|
37
|
+
children: renderCustomContent ? renderCustomContent(slide, index) : /*#__PURE__*/jsxs("div", {
|
|
38
|
+
children: [slide.title && /*#__PURE__*/jsx("h1", {
|
|
39
|
+
className: "".concat(titleClassName, " mb-4"),
|
|
40
|
+
children: /*#__PURE__*/React.isValidElement(slide.title) ? slide.title : typeof slide.title === 'string' && slide.title.includes('<strong') ? slide.title.split(/(<strong[^>]*>.*?<\/strong>)/g).map((part, i) => {
|
|
41
|
+
if (part.match(/<strong[^>]*>.*?<\/strong>/)) {
|
|
42
|
+
const classMatch = part.match(/class="([^"]*)"/);
|
|
43
|
+
const textMatch = part.match(/>([^<]+)</);
|
|
44
|
+
if (classMatch && textMatch) {
|
|
45
|
+
return /*#__PURE__*/jsx("strong", {
|
|
46
|
+
className: classMatch[1],
|
|
47
|
+
children: textMatch[1]
|
|
48
|
+
}, i);
|
|
49
|
+
}
|
|
50
|
+
const textOnly = part.replace(/<\/?strong[^>]*>/g, '');
|
|
51
|
+
return /*#__PURE__*/jsx("strong", {
|
|
52
|
+
children: textOnly
|
|
53
|
+
}, i);
|
|
54
|
+
}
|
|
55
|
+
return /*#__PURE__*/jsx(React.Fragment, {
|
|
56
|
+
children: part
|
|
57
|
+
}, i);
|
|
58
|
+
}) : slide.title
|
|
59
|
+
}), slide.description && /*#__PURE__*/jsx("p", {
|
|
60
|
+
className: "".concat(descriptionClassName, " mb-4"),
|
|
61
|
+
children: slide.description
|
|
62
|
+
}), slide.buttonText && /*#__PURE__*/jsx(Button, {
|
|
63
|
+
bsPrefix: "home",
|
|
64
|
+
variant: "button",
|
|
65
|
+
className: "mt-4",
|
|
66
|
+
size: "lg",
|
|
67
|
+
onClick: slide.buttonOnClick,
|
|
68
|
+
children: slide.buttonText
|
|
69
|
+
})]
|
|
70
|
+
})
|
|
71
|
+
})]
|
|
72
|
+
})
|
|
73
|
+
})]
|
|
74
|
+
})
|
|
75
|
+
}, slide.id || index))
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
export { HeroCarousel, HeroCarousel as default };
|
|
80
|
+
//# sourceMappingURL=index.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/Carousel.jsx"],"sourcesContent":["import React from 'react';\r\nimport { Carousel as BootstrapCarousel, Container, Button } from 'react-bootstrap';\r\n\r\n/**\r\n * Hero Carousel Component\r\n * \r\n * A reusable hero carousel/slider component with background images and customizable content.\r\n * \r\n * @param {Array} slides - Array of slide objects\r\n * @param {string} slides[].image - Background image URL or path\r\n * @param {string} slides[].title - Slide title (supports HTML/JSX)\r\n * @param {string} slides[].description - Slide description text\r\n * @param {string} slides[].buttonText - Button text\r\n * @param {Function} slides[].buttonOnClick - Button click handler\r\n * @param {number} slides[].interval - Auto-play interval in milliseconds (optional)\r\n * @param {string} className - Additional CSS classes for the carousel container\r\n * @param {string} overlayClassName - CSS classes for the overlay div\r\n * @param {string} contentClassName - CSS classes for the content section\r\n * @param {string} titleClassName - CSS classes for the title\r\n * @param {string} descriptionClassName - CSS classes for the description\r\n * @param {Function} renderCustomContent - Custom content render function (optional)\r\n * \r\n * @example\r\n * ```jsx\r\n * <HeroCarousel \r\n * slides={[\r\n * {\r\n * image: \"/path/to/image.jpg\",\r\n * title: \"Welcome to Our Site\",\r\n * description: \"This is a description\",\r\n * buttonText: \"Get Started\",\r\n * buttonOnClick: () => console.log('clicked')\r\n * }\r\n * ]}\r\n * />\r\n * ```\r\n */\r\nconst HeroCarousel = ({\r\n slides = [],\r\n className = '',\r\n overlayClassName = 'overlay',\r\n contentClassName = 'carousel-content',\r\n titleClassName = 'home-title',\r\n descriptionClassName = 'home-desc',\r\n renderCustomContent\r\n}) => {\r\n if (!slides || slides.length === 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n <BootstrapCarousel className={className}>\r\n {slides.map((slide, index) => (\r\n <BootstrapCarousel.Item \r\n key={slide.id || index} \r\n interval={slide.interval !== undefined ? slide.interval : null}\r\n >\r\n <div \r\n className=\"carousel-bg-img\" \r\n style={{ backgroundImage: `url(${slide.image})` }}\r\n >\r\n <div className={overlayClassName}></div>\r\n <div className={contentClassName}>\r\n <Container className=\"position-relative\">\r\n <div className=\"clearfix pt-md-5 mt-md-5 d-md-block d-lg-none d-none\"></div>\r\n <div className=\"home-content-section\">\r\n {renderCustomContent ? (\r\n renderCustomContent(slide, index)\r\n ) : (\r\n <div>\r\n {slide.title && (\r\n <h1 className={`${titleClassName} mb-4`}>\r\n {React.isValidElement(slide.title) ? (\r\n slide.title\r\n ) : typeof slide.title === 'string' && slide.title.includes('<strong') ? (\r\n slide.title.split(/(<strong[^>]*>.*?<\\/strong>)/g).map((part, i) => {\r\n if (part.match(/<strong[^>]*>.*?<\\/strong>/)) {\r\n const classMatch = part.match(/class=\"([^\"]*)\"/);\r\n const textMatch = part.match(/>([^<]+)</);\r\n if (classMatch && textMatch) {\r\n return <strong key={i} className={classMatch[1]}>{textMatch[1]}</strong>;\r\n }\r\n const textOnly = part.replace(/<\\/?strong[^>]*>/g, '');\r\n return <strong key={i}>{textOnly}</strong>;\r\n }\r\n return <React.Fragment key={i}>{part}</React.Fragment>;\r\n })\r\n ) : (\r\n slide.title\r\n )}\r\n </h1>\r\n )}\r\n {slide.description && (\r\n <p className={`${descriptionClassName} mb-4`}>\r\n {slide.description}\r\n </p>\r\n )}\r\n {slide.buttonText && (\r\n <Button \r\n bsPrefix=\"home\" \r\n variant=\"button\" \r\n className=\"mt-4\" \r\n size=\"lg\" \r\n onClick={slide.buttonOnClick}\r\n >\r\n {slide.buttonText}\r\n </Button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </Container>\r\n </div>\r\n </div>\r\n </BootstrapCarousel.Item>\r\n ))}\r\n </BootstrapCarousel>\r\n );\r\n};\r\n\r\nexport default HeroCarousel;\r\n\r\n"],"names":["HeroCarousel","_ref","slides","className","overlayClassName","contentClassName","titleClassName","descriptionClassName","renderCustomContent","length","_jsx","BootstrapCarousel","children","map","slide","index","Item","interval","undefined","_jsxs","style","backgroundImage","concat","image","Container","title","React","isValidElement","includes","split","part","i","match","classMatch","textMatch","textOnly","replace","Fragment","description","buttonText","Button","bsPrefix","variant","size","onClick","buttonOnClick","id"],"mappings":"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"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var reactBootstrap = require('react-bootstrap');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
const HeroCarousel = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
slides = [],
|
|
12
|
+
className = '',
|
|
13
|
+
overlayClassName = 'overlay',
|
|
14
|
+
contentClassName = 'carousel-content',
|
|
15
|
+
titleClassName = 'home-title',
|
|
16
|
+
descriptionClassName = 'home-desc',
|
|
17
|
+
renderCustomContent
|
|
18
|
+
} = _ref;
|
|
19
|
+
if (!slides || slides.length === 0) {
|
|
20
|
+
return null;
|
|
21
|
+
}
|
|
22
|
+
return /*#__PURE__*/jsxRuntime.jsx(reactBootstrap.Carousel, {
|
|
23
|
+
className: className,
|
|
24
|
+
children: slides.map((slide, index) => /*#__PURE__*/jsxRuntime.jsx(reactBootstrap.Carousel.Item, {
|
|
25
|
+
interval: slide.interval !== undefined ? slide.interval : null,
|
|
26
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
27
|
+
className: "carousel-bg-img",
|
|
28
|
+
style: {
|
|
29
|
+
backgroundImage: "url(".concat(slide.image, ")")
|
|
30
|
+
},
|
|
31
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
32
|
+
className: overlayClassName
|
|
33
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
34
|
+
className: contentClassName,
|
|
35
|
+
children: /*#__PURE__*/jsxRuntime.jsxs(reactBootstrap.Container, {
|
|
36
|
+
className: "position-relative",
|
|
37
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
38
|
+
className: "clearfix pt-md-5 mt-md-5 d-md-block d-lg-none d-none"
|
|
39
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
40
|
+
className: "home-content-section",
|
|
41
|
+
children: renderCustomContent ? renderCustomContent(slide, index) : /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
42
|
+
children: [slide.title && /*#__PURE__*/jsxRuntime.jsx("h1", {
|
|
43
|
+
className: "".concat(titleClassName, " mb-4"),
|
|
44
|
+
children: /*#__PURE__*/React.isValidElement(slide.title) ? slide.title : typeof slide.title === 'string' && slide.title.includes('<strong') ? slide.title.split(/(<strong[^>]*>.*?<\/strong>)/g).map((part, i) => {
|
|
45
|
+
if (part.match(/<strong[^>]*>.*?<\/strong>/)) {
|
|
46
|
+
const classMatch = part.match(/class="([^"]*)"/);
|
|
47
|
+
const textMatch = part.match(/>([^<]+)</);
|
|
48
|
+
if (classMatch && textMatch) {
|
|
49
|
+
return /*#__PURE__*/jsxRuntime.jsx("strong", {
|
|
50
|
+
className: classMatch[1],
|
|
51
|
+
children: textMatch[1]
|
|
52
|
+
}, i);
|
|
53
|
+
}
|
|
54
|
+
const textOnly = part.replace(/<\/?strong[^>]*>/g, '');
|
|
55
|
+
return /*#__PURE__*/jsxRuntime.jsx("strong", {
|
|
56
|
+
children: textOnly
|
|
57
|
+
}, i);
|
|
58
|
+
}
|
|
59
|
+
return /*#__PURE__*/jsxRuntime.jsx(React.Fragment, {
|
|
60
|
+
children: part
|
|
61
|
+
}, i);
|
|
62
|
+
}) : slide.title
|
|
63
|
+
}), slide.description && /*#__PURE__*/jsxRuntime.jsx("p", {
|
|
64
|
+
className: "".concat(descriptionClassName, " mb-4"),
|
|
65
|
+
children: slide.description
|
|
66
|
+
}), slide.buttonText && /*#__PURE__*/jsxRuntime.jsx(reactBootstrap.Button, {
|
|
67
|
+
bsPrefix: "home",
|
|
68
|
+
variant: "button",
|
|
69
|
+
className: "mt-4",
|
|
70
|
+
size: "lg",
|
|
71
|
+
onClick: slide.buttonOnClick,
|
|
72
|
+
children: slide.buttonText
|
|
73
|
+
})]
|
|
74
|
+
})
|
|
75
|
+
})]
|
|
76
|
+
})
|
|
77
|
+
})]
|
|
78
|
+
})
|
|
79
|
+
}, slide.id || index))
|
|
80
|
+
});
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
exports.HeroCarousel = HeroCarousel;
|
|
84
|
+
exports.default = HeroCarousel;
|
|
85
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/Carousel.jsx"],"sourcesContent":["import React from 'react';\r\nimport { Carousel as BootstrapCarousel, Container, Button } from 'react-bootstrap';\r\n\r\n/**\r\n * Hero Carousel Component\r\n * \r\n * A reusable hero carousel/slider component with background images and customizable content.\r\n * \r\n * @param {Array} slides - Array of slide objects\r\n * @param {string} slides[].image - Background image URL or path\r\n * @param {string} slides[].title - Slide title (supports HTML/JSX)\r\n * @param {string} slides[].description - Slide description text\r\n * @param {string} slides[].buttonText - Button text\r\n * @param {Function} slides[].buttonOnClick - Button click handler\r\n * @param {number} slides[].interval - Auto-play interval in milliseconds (optional)\r\n * @param {string} className - Additional CSS classes for the carousel container\r\n * @param {string} overlayClassName - CSS classes for the overlay div\r\n * @param {string} contentClassName - CSS classes for the content section\r\n * @param {string} titleClassName - CSS classes for the title\r\n * @param {string} descriptionClassName - CSS classes for the description\r\n * @param {Function} renderCustomContent - Custom content render function (optional)\r\n * \r\n * @example\r\n * ```jsx\r\n * <HeroCarousel \r\n * slides={[\r\n * {\r\n * image: \"/path/to/image.jpg\",\r\n * title: \"Welcome to Our Site\",\r\n * description: \"This is a description\",\r\n * buttonText: \"Get Started\",\r\n * buttonOnClick: () => console.log('clicked')\r\n * }\r\n * ]}\r\n * />\r\n * ```\r\n */\r\nconst HeroCarousel = ({\r\n slides = [],\r\n className = '',\r\n overlayClassName = 'overlay',\r\n contentClassName = 'carousel-content',\r\n titleClassName = 'home-title',\r\n descriptionClassName = 'home-desc',\r\n renderCustomContent\r\n}) => {\r\n if (!slides || slides.length === 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n <BootstrapCarousel className={className}>\r\n {slides.map((slide, index) => (\r\n <BootstrapCarousel.Item \r\n key={slide.id || index} \r\n interval={slide.interval !== undefined ? slide.interval : null}\r\n >\r\n <div \r\n className=\"carousel-bg-img\" \r\n style={{ backgroundImage: `url(${slide.image})` }}\r\n >\r\n <div className={overlayClassName}></div>\r\n <div className={contentClassName}>\r\n <Container className=\"position-relative\">\r\n <div className=\"clearfix pt-md-5 mt-md-5 d-md-block d-lg-none d-none\"></div>\r\n <div className=\"home-content-section\">\r\n {renderCustomContent ? (\r\n renderCustomContent(slide, index)\r\n ) : (\r\n <div>\r\n {slide.title && (\r\n <h1 className={`${titleClassName} mb-4`}>\r\n {React.isValidElement(slide.title) ? (\r\n slide.title\r\n ) : typeof slide.title === 'string' && slide.title.includes('<strong') ? (\r\n slide.title.split(/(<strong[^>]*>.*?<\\/strong>)/g).map((part, i) => {\r\n if (part.match(/<strong[^>]*>.*?<\\/strong>/)) {\r\n const classMatch = part.match(/class=\"([^\"]*)\"/);\r\n const textMatch = part.match(/>([^<]+)</);\r\n if (classMatch && textMatch) {\r\n return <strong key={i} className={classMatch[1]}>{textMatch[1]}</strong>;\r\n }\r\n const textOnly = part.replace(/<\\/?strong[^>]*>/g, '');\r\n return <strong key={i}>{textOnly}</strong>;\r\n }\r\n return <React.Fragment key={i}>{part}</React.Fragment>;\r\n })\r\n ) : (\r\n slide.title\r\n )}\r\n </h1>\r\n )}\r\n {slide.description && (\r\n <p className={`${descriptionClassName} mb-4`}>\r\n {slide.description}\r\n </p>\r\n )}\r\n {slide.buttonText && (\r\n <Button \r\n bsPrefix=\"home\" \r\n variant=\"button\" \r\n className=\"mt-4\" \r\n size=\"lg\" \r\n onClick={slide.buttonOnClick}\r\n >\r\n {slide.buttonText}\r\n </Button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </Container>\r\n </div>\r\n </div>\r\n </BootstrapCarousel.Item>\r\n ))}\r\n </BootstrapCarousel>\r\n );\r\n};\r\n\r\nexport default HeroCarousel;\r\n\r\n"],"names":["HeroCarousel","_ref","slides","className","overlayClassName","contentClassName","titleClassName","descriptionClassName","renderCustomContent","length","_jsx","BootstrapCarousel","children","map","slide","index","Item","interval","undefined","_jsxs","style","backgroundImage","concat","image","Container","title","React","isValidElement","includes","split","part","i","match","classMatch","textMatch","textOnly","replace","Fragment","description","buttonText","Button","bsPrefix","variant","size","onClick","buttonOnClick","id"],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@veeyaainnovatives/carousel",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A reusable Carousel/Hero slider component with background images and customizable content for React applications",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/index.esm.js",
|
|
10
|
+
"require": "./dist/index.js"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"README.md"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "rollup -c",
|
|
19
|
+
"dev": "rollup -c -w",
|
|
20
|
+
"prepare": "npm run build"
|
|
21
|
+
},
|
|
22
|
+
"keywords": [
|
|
23
|
+
"react",
|
|
24
|
+
"carousel",
|
|
25
|
+
"slider",
|
|
26
|
+
"hero",
|
|
27
|
+
"banner",
|
|
28
|
+
"component",
|
|
29
|
+
"veeyaainnovatives"
|
|
30
|
+
],
|
|
31
|
+
"author": "Veeyaa Innovatives",
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
35
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
36
|
+
"react-bootstrap": "^2.0.0"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@babel/core": "^7.23.5",
|
|
40
|
+
"@babel/preset-env": "^7.23.5",
|
|
41
|
+
"@babel/preset-react": "^7.23.3",
|
|
42
|
+
"@rollup/plugin-babel": "^6.0.4",
|
|
43
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
44
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
45
|
+
"rollup": "^4.6.1",
|
|
46
|
+
"rollup-plugin-peer-deps-external": "^2.2.4"
|
|
47
|
+
},
|
|
48
|
+
"repository": {
|
|
49
|
+
"type": "git",
|
|
50
|
+
"url": "https://github.com/npmveeyaa/carousel.git"
|
|
51
|
+
},
|
|
52
|
+
"homepage": "https://github.com/npmveeyaa/carousel#readme",
|
|
53
|
+
"bugs": {
|
|
54
|
+
"url": "https://github.com/npmveeyaa/carousel/issues"
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|