Reactのツアー系ライブラリを比較 & React Joyrideの使い方

category
date
Jan 30, 2023
slug
tours-and-about-react-joyride
status
Published
summary
WEBにてユーザーのオンボーディングを実装するときに、よくある要素以外のところをオーバーレイしてガイドが表示されるアレをやりたかった。
type
Post
WEBにてユーザーのオンボーディングを実装するときに、よくある要素以外のところをオーバーレイしてガイドが表示されるアレをやりたかった。
明確な呼び名はなく、tourとかintroとかいう名前がついているライブラリが多い。
 
調べてみたら、以下のようなものが見つかった。

reactour

https://reactour.vercel.app/
Githubスター数：約3300 デザイン：古め アップデート：普通

React joyride

https://react-joyride.com/
Githubスター数：約5200 デザイン：新しめ アップデート：少なめ

react-shepherd

Githubスター数：約5200 デザイン：古め アップデート：少なめ

intro.js React

Githubスター数：約327（jsパッケージは） デザイン：古め アップデート：少なめ あまりアップデートされておらず、cjsのため除外
 
reactourとReact joyrideで迷いましたが、スクロールした時にちゃんと場所が追従するのと、DJのJoyrideが大好きなので、React joyrideを使うことにしました。
最終アップデートが古いのはちょっと気になったものの、UI系で依存度が低いのでそこまでアップデート頻度を気にしなくてもいいかなと思いました。

React-Joyrideの使い方

まずはインストール
yarn add react-joyride
 
任意の部分に要素を追加

const steps = [
  {
    target: '#basic-info',
    content: <h2>入力してみましょう！</h2>,
    locale: {
      skip: <strong aria-label="skip">スキップ</strong>,
      next: '次へ',
    },
    disableBeacon: true, // これを設定するとビーコンが出ずにすぐにモーダルが出ます
    disableOverlayClose: true,
    placement: 'bottom',
    spotlightClicks: true,
  },
  {
    target: '#first-input',
    content: <h2>必要な情報を入力します。</h2>,
    locale: {
      skip: <strong aria-label="skip">スキップ</strong>,
      next: '次へ',
      back: '戻る',
      last: '終了',
    },
  },
  {
    target: '#save-button',
    content: <h2>入力が完了したら、保存してみましょう！</h2>,
    locale: {
      skip: <strong aria-label="skip">スキップ</strong>,
      next: '次へ',
      back: '戻る',
      last: '終了',
    },
  },
];

...

<Joyride
  continuous
  hideCloseButton
  run={running} // ツアーを始める時にtrueにする
  scrollToFirstStep
  showProgress // 1/2などの数が表示される
  showSkipButton
  steps={steps}
  spotlightClicks
  styles={{
    options: {
      zIndex: 10000,
    },
  }}
/>
 
 
 

© Titch 2022 - 2024