Skip to content

Commit 89f6c61

Browse files
yifaneyeyifaneye
authored
v0.4.0 (#84)
1 parent a16c749 commit 89f6c61

File tree

9 files changed

+252
-65
lines changed

9 files changed

+252
-65
lines changed

‎.github/FUNDING.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
github: yifaneye
22
patreon: yifanai
3+
buymeacoffee: yifanai

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22

33
[![NPM](https://img.shields.io/npm/v/react-gallery-carousel.svg)](https://www.npmjs.com/package/react-gallery-carousel)
44

5+
## v0.4.0 (2023-01-28)
6+
7+
### Enhancements
8+
9+
- Add support for custom elements.
10+
11+
- Improve format in the README file.
12+
513
## v0.3.0 (2022-10-15)
614

715
### Bug Fixes

‎README.md‎

Lines changed: 67 additions & 64 deletions
Large diffs are not rendered by default.

‎example/src/App.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Carousel3 from './components/Carousel3';
66
import Carousel4 from './components/Carousel4';
77
import Carousel5 from './components/Carousel5';
88
import Carousel6 from './components/Carousel6';
9+
import Carousel7 from './components/Carousel7';
10+
import Carousel8 from './components/Carousel8';
911
import Footer from './components/Footer';
1012

1113
const imageIDs = Array(30) // the maximum is currently 149
@@ -31,6 +33,8 @@ const App = () => {
3133
<Carousel4 images={images} />
3234
<Carousel5 images={images} />
3335
<Carousel6 images={images} />
36+
<Carousel7 images={images} />
37+
<Carousel8 images={images} />
3438
<Footer />
3539
</div>
3640
);

‎example/src/components/Carousel7.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, { useRef } from 'react';
2+
import Carousel from 'react-gallery-carousel';
3+
import 'react-gallery-carousel/dist/index.css';
4+
5+
const Carousel7 = ({ images }) => {
6+
const carouselRef = useRef(null);
7+
8+
return (
9+
<section className='section' aria-labelledby='example7'>
10+
<header className='section-header'>
11+
<h2 id='example7'>
12+
Example 7: Default carousel with custom icons{' '}
13+
<a href='https://yifanai.com/rgc7'>code</a>
14+
</h2>
15+
<p>
16+
To customize the icons, pass custom icon component to props (e.g.{' '}
17+
<code>leftIcon</code>, <code>rightIcon</code>).
18+
</p>
19+
</header>
20+
<div className='carousel-container'>
21+
<Carousel
22+
ref={carouselRef}
23+
images={images}
24+
isMaximized={false}
25+
hasMediaButton={false}
26+
hasIndexBoard={false}
27+
maxIcon={
28+
<span
29+
className='icon-text'
30+
role='img'
31+
aria-label='max'
32+
style={{
33+
fontSize: 'min(50px, 5vw)'
34+
}}
35+
>
36+
↗️
37+
</span>
38+
}
39+
minIcon={
40+
<span
41+
className='icon-text'
42+
role='img'
43+
aria-label='min'
44+
style={{
45+
fontSize: 'min(50px, 5vw)'
46+
}}
47+
>
48+
↙️
49+
</span>
50+
}
51+
leftIcon={
52+
<span
53+
className='icon-text'
54+
role='img'
55+
aria-label='left'
56+
style={{
57+
fontSize: 'min(50px, 5vw)'
58+
}}
59+
>
60+
◀️
61+
</span>
62+
}
63+
rightIcon={
64+
<span
65+
className='icon-text'
66+
role='img'
67+
aria-label='right'
68+
style={{
69+
fontSize: 'min(50px, 5vw)'
70+
}}
71+
>
72+
▶️
73+
</span>
74+
}
75+
/>
76+
</div>
77+
</section>
78+
);
79+
};
80+
81+
export default Carousel7;

‎example/src/components/Carousel8.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React, { useRef } from 'react';
2+
import Carousel from 'react-gallery-carousel';
3+
import 'react-gallery-carousel/dist/index.css';
4+
import { Button } from 'react-responsive-button';
5+
6+
const Carousel8 = ({ images }) => {
7+
const carouselRef = useRef(null);
8+
9+
return (
10+
<section className='section' aria-labelledby='example8'>
11+
<header className='section-header'>
12+
<h2 id='example8'>
13+
Example 8: Default carousel with custom elements{' '}
14+
<small>(available from v0.4.0)</small>{' '}
15+
<a href='https://yifanai.com/rgc8'>code</a>
16+
</h2>
17+
<p>
18+
To use custom elements, set the widget props (e.g.{' '}
19+
<code>hasLeftButton</code>, <code>hasRightButton</code>) to{' '}
20+
<code>false</code>, then pass the custom elements to the{' '}
21+
<code>elements</code> prop.
22+
</p>
23+
</header>
24+
<div className='carousel-container'>
25+
<Carousel
26+
ref={carouselRef}
27+
images={images}
28+
isMaximized={false}
29+
hasSizeButton={false}
30+
hasMediaButton={false}
31+
hasIndexBoard={false}
32+
hasLeftButton={false}
33+
hasRightButton={false}
34+
elements={
35+
<>
36+
<Button
37+
style={{
38+
position: 'absolute',
39+
top: '50%',
40+
left: 0,
41+
transform: 'translateY(-50%)',
42+
borderRadius: 0
43+
}}
44+
aria-label='Go to the slide on the left'
45+
onClick={() => carouselRef.current.goLeft()}
46+
>
47+
<span
48+
className='icon-text'
49+
role='img'
50+
aria-label='left'
51+
style={{
52+
fontSize: 'min(50px, 5vw)'
53+
}}
54+
>
55+
⬅️
56+
</span>
57+
</Button>
58+
<Button
59+
style={{
60+
position: 'absolute',
61+
top: '50%',
62+
right: 0,
63+
transform: 'translateY(-50%)',
64+
borderRadius: 0
65+
}}
66+
aria-label='Go to the slide on the right'
67+
onClick={() => carouselRef.current.goRight()}
68+
>
69+
<span
70+
className='icon-text'
71+
role='img'
72+
aria-label='right'
73+
style={{
74+
fontSize: 'min(50px, 5vw)'
75+
}}
76+
>
77+
➡️
78+
</span>
79+
</Button>
80+
</>
81+
}
82+
/>
83+
</div>
84+
</section>
85+
);
86+
};
87+
88+
export default Carousel8;

‎example/src/components/Footer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const Footer = () => {
55
return (
66
<footer className='section'>
77
<div className='action-container'>
8-
<strong>react-gallery-carousel (v0.3.0)</strong>
8+
<strong>react-gallery-carousel (v0.4.0)</strong>
99
<div className='star-button-container'>
1010
<GitHubButton
1111
href='https://github.com/yifaneye/react-gallery-carousel'

‎src/components/Carousel/Carousel.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,7 @@ const GalleryCarousel = (props, ref) => {
567567
/>
568568
</div>
569569
{widgets}
570+
{props.elements && props.elements}
570571
</div>
571572
{thumbnails}
572573
</div>

‎src/components/Carousel/props.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export const propTypes = {
5656
maxIcon: PropTypes.node,
5757
activeIcon: PropTypes.node,
5858
passiveIcon: PropTypes.node,
59+
elements: PropTypes.node,
5960
shouldSwipeOnMouse: PropTypes.bool.isRequired,
6061
shouldMaximizeOnClick: PropTypes.bool.isRequired,
6162
shouldMinimizeOnClick: PropTypes.bool.isRequired,

0 commit comments

Comments
 (0)