Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add onPageChanged callback
Browse files Browse the repository at this point in the history
LanaIV committed Jul 22, 2021

Verified

This commit was signed with the committer’s verified signature.
bkioshn bkioshn
1 parent 6ec5800 commit 561ff46
Showing 3 changed files with 37 additions and 2 deletions.
15 changes: 15 additions & 0 deletions examples/home/App.js
Original file line number Diff line number Diff line change
@@ -60,6 +60,21 @@ const App = () => {
</Carousel.Item>
))}
</Carousel>
<h4 className="thin">Single column with onPageChanged callback</h4>
<Carousel
showDots
containerStyle={{ maxWidth: '500px' }}
onPageChanged={currentPage => console.log(currentPage)}
>
{[...Array(4)].map((_, i) => (
<Carousel.Item key={i}>
<img
width="100%"
src={randomImgUrl.replace('{x}', 400).replace('{y}', 280) + i}
/>
</Carousel.Item>
))}
</Carousel>
<h4 className="thin">Multiple columns</h4>
<Carousel showDots cols={5}>
{[...Array(15)].map((_, i) => (
10 changes: 8 additions & 2 deletions src/components/Carousel.js
Original file line number Diff line number Diff line change
@@ -106,7 +106,8 @@ const Carousel = ({
dot,
containerClassName = '',
containerStyle = {},
children
children,
onPageChanged
}) => {
const [currentPage, setCurrentPage] = useState(0)
const [isHover, setIsHover] = useState(false)
@@ -127,6 +128,10 @@ const Carousel = ({
smoothscroll.polyfill()
}, [])

useEffect(() => {
onPageChanged && onPageChanged(currentPage)
}, [currentPage])

useEffect(() => {
const { cols, rows, gap, loop, autoplay } = breakpointSetting || {}
setCols(cols || colsProp)
@@ -436,7 +441,8 @@ Carousel.propTypes = {
PropTypes.elementType
]),
containerClassName: PropTypes.string,
containerStyle: PropTypes.object
containerStyle: PropTypes.object,
onPageChanged: PropTypes.func
}

Carousel.Item = ({ children }) => children
14 changes: 14 additions & 0 deletions stories/Carousel.stories.js
Original file line number Diff line number Diff line change
@@ -26,6 +26,20 @@ export const SingleColumn = () => {
)
}

export const SingleColumnWithOnPageChangedCallback = () => {
const onPageChanged = currentPage => console.log(currentPage)

return (
<Carousel cols={1} rows={1} onPageChanged={onPageChanged}>
{[...Array(5)].map((_, i) => (
<Carousel.Item key={i}>
<Item img={randomImageUrl + i} />
</Carousel.Item>
))}
</Carousel>
)
}

export const MultiColumns = () => {
return (
<Carousel cols={3} rows={1}>

0 comments on commit 561ff46

Please sign in to comment.