Beautiful swiper for React
npm install @comjaes/swiper
import {JSSwiper} from '@comjaes/swiper'
import {JSSwiperData} from '@comjaes/swiper/dist/cjs/src/lib/JSSwiper'
...
const stateEl = useRef<HTMLButtonElement>(null)
const itemList: JSSwiperData[] = [
{order: 1, image: '/image8.png'},
{order: 2, image: '/image9.png'},
{order: 3, image: '/image10.png'},
]
...
<JSSwiper
items={itemList}
stateButton={stateEl.current}
duration={200}
interval={5000}
onChangeItem={console.log}
onChangeState={console.log}
/>
<button ref={stateEl}>Toggle State</button>
This feature is for About useEffect called twice issue in React 18
<JSSwiper
...
startEffect="useEffectOnce"
/>
or
const useEffectOnce = (callback: React.EffectCallback, dependencyList: React.DependencyList | undefined) => {
...
}
...
<JSSwiper
...
startEffect={useEffectOnce}
/>
Property | Default | Type | Description |
---|---|---|---|
items | undefined | extends JSSwiperData
|
|
prevButton | undefined | extends HTMLElement
|
|
nextButton | undefined | extends HTMLElement
|
|
stateButton | undefined | extends HTMLElement
|
|
duration | 200 | number |
|
interval | 0 | number |
|
width | undefined | number |
|
height | undefined | number |
|
startEffect | undefined |
'useEffectOnce' or useEffect type
|
For React dev environment |
JSSwiperData
type JSSwiperData = {
image: string
order: number
/** image styles */
backgroundColor?: Property.BackgroundColor
objectFit?: Property.ObjectFit
} & ({
link: string
newTab?: boolean
} | {
link?: never
newTab?: never
})
useEffect type
(callback: React.EffectCallback, dependencyList: React.DependencyList | undefined) => void