47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react'
|
|
|
|
export const useDotButton = (emblaApi: any) => {
|
|
const [selectedIndex, setSelectedIndex] = useState(0)
|
|
const [scrollSnaps, setScrollSnaps] = useState([])
|
|
|
|
const onDotButtonClick = useCallback(
|
|
(index: number) => {
|
|
if (!emblaApi) return
|
|
emblaApi.scrollTo(index)
|
|
},
|
|
[emblaApi]
|
|
)
|
|
|
|
const onInit = useCallback((emblaApi: any) => {
|
|
setScrollSnaps(emblaApi.scrollSnapList())
|
|
}, [])
|
|
|
|
const onSelect = useCallback((emblaApi: any) => {
|
|
setSelectedIndex(emblaApi.selectedScrollSnap())
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!emblaApi) return
|
|
|
|
onInit(emblaApi)
|
|
onSelect(emblaApi)
|
|
emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)
|
|
}, [emblaApi, onInit, onSelect])
|
|
|
|
return {
|
|
selectedIndex,
|
|
scrollSnaps,
|
|
onDotButtonClick
|
|
}
|
|
}
|
|
|
|
export const DotButton = (props: any) => {
|
|
const { children, ...restProps } = props
|
|
|
|
return (
|
|
<button type="button" {...restProps}>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|