English

React Splide

Reactインテグレーション

v3用のドキュメントを参照しています

概要

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

インストール

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

$ npm install @splidejs/react-splide

使用方法

コンポーネント

パッケージから、SplideとSplideSlideの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