React Splide

Reactインテグレーション

概要

はSplideをReactプロジェクトに導入するためのパッケージです。

インストール

最新版をNPMから取得してください。

$ npm install @splidejs/react-splide

使用方法

コンポーネント

パッケージから、SplideSplideSlideの2つのコンポーネントをインポートします。

import { Splide, SplideSlide } from '@splidejs/react-splide';
JavaScript

これらを、以下のようにしてレンダリングしてください。

<Splide>
<SplideSlide>
<img src="image1.jpg" alt="Image 1"/>
</SplideSlide>
<SplideSlide>
<img src="image2.jpg" alt="Image 2"/>
</SplideSlide>
</Splide>
JSX

CSS

CSSファイルを選択し、インポートしてください。<link>タグで読み込んでも構いません。

import '@splidejs/splide/dist/css/splide.min.css';
// または
import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';
JavaScript

Props

id

id: string

ルート要素のIDを決めます。


className

className: string

ルート要素に追加するクラスです。


options

options: Options

Splideオプション をオブジェクトで渡します。

<Splide
options={ {
rewind: true,
width : 800,
gap : '1rem',
} }
>
</Splide>
JSX

このプロパティはリアクティブであり、値を更新するとスライダー自身も更新されますが、読み取り専用のオプションは変更しないでください


Extensions

Extensions: Record<string, ComponentConstructor>

エクステンションをオブジェクト形式で追加します。


Transition

Transition: ComponentConstructor

トランジションコンポーネントを上書きます。


hasSliderWrapper

hasSliderWrapper: boolean

トラック要素をスライダー要素で囲むかどうかを決めます。


hasAutoplayProgress

hasAutoplayProgress: boolean

自動再生のプログレスバーをレンダリングするかどうかを決めます。


hasAutoplayControls

hasAutoplayControls: boolean

自動再生の再生・停止ボタンをレンダリングするかどうかを決めます。


playButtonLabel

playButtonLabel: string = 'Play'

再生ボタンに使用するラベルを設定します。


pauseButtonLabel

pauseButtonLabel: string = 'Pause'

停止ボタンに使用するラベルを設定します。


renderControls

renderControls: () => ReactNode | ReactNodeArray

トラック要素の後に任意の要素をレンダリングするための関数です。たとえば矢印をカスタマイズする場合などに用います。

<Splide
renderControls={ () => (
<div className="splide__arrows">
<button className="splide__arrow splide__arrow--prev">
</button>
<button className="splide__arrow splide__arrow--next">
</button>
</div>
) }
>
JSX

イベント

Splideコンポーネント経由で、Splide内のすべてのイベントにハンドラを登録することができます。ハンドラの関数名はイベント名から生成されますが、"on"接頭子の付加、キャメルケースへの変換、コロンの削除という3つの処理が行われます。たとえば、"arrows:mounted"は"onArrowsMounted"に変換されます。

実際のイベントリストは、から確認することができます。

<Splide onArrowsMounted={ ( splide, prev, next ) => { console.log( prev, next ) } }>
JSX

なお、ハンドラの第一引数は常にSplideのインスタンスで、オリジナルの引数はそのあとに続きます。

Splideインスタンスの取得

Splideインスタンスを取得し、直接操作したい場合は、React.createRefメソッドまたはuseRefフックによるRefオブジェクトを介して取得することができます。

<Splide ref={ ref }>
...
</Splide>
JSX

ReactがSplideコンポーネントをマウントした後で、ref.current.splideからインスタンスを取得してください(マウント前はundefinedです)。

componentDidMount() {
if ( this.ref.current ) {
console.log( this.ref.current.splide.length );
}
}
// または
useEffect( () => {
if ( ref.current ) {
console.log( ref.current.splide.length );
}
} );
JSX

サンプル

以下に簡単な例を示します。

import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';
export default () => {
return (
<Splide
options={ {
rewind: true,
gap : '1rem',
} }
>
<SplideSlide>
<img src="image1.jpg" alt="Image 1"/>
</SplideSlide>
<SplideSlide>
<img src="image2.jpg" alt="Image 2"/>
</SplideSlide>
<SplideSlide>
<img src="image3.jpg" alt="Image 3"/>
</SplideSlide>
</Splide>
);
}
JSX
で、実際に動作している例を見ることができ、それぞれのソースコードは以下の場所に置いてあります。