ツアーライブラリは、ユーザーがアプリケーションの機能を理解しやすくするためのインタラクティブなガイドを提供します。これにより、ユーザーは新しい機能を簡単に学ぶことができ、アプリケーションの使い方を迅速に習得することができます。これらのライブラリは、特に複雑なインターフェースを持つアプリケーションにおいて、ユーザーエクスペリエンスを向上させるために役立ちます。
react-joyrideは、ツアーの各ステップを詳細にカスタマイズできる機能を提供します。ツールチップのスタイル、アニメーション、トリガーの条件などを自由に設定でき、特定のユーザー体験に合わせたツアーを作成できます。
reactourは、基本的なカスタマイズオプションを提供しますが、react-joyrideほどの詳細な設定はできません。シンプルなツアーを迅速に作成したい場合には適していますが、複雑なカスタマイズが必要な場合には制約があります。
react-joyrideは、ユーザーインターフェースが洗練されており、視覚的に魅力的なツアーを提供します。アニメーションやエフェクトが豊富で、ユーザーの注意を引きやすく設計されています。
reactourは、シンプルでクリーンなデザインを持ち、基本的なツアーを迅速に実装できますが、視覚的な魅力はreact-joyrideに比べて劣ります。
react-joyrideは、カスタマイズ性が高く、複雑なツアーを作成する必要がある場合に適しています。アニメーションやトリガーの設定が豊富で、ユーザーの行動に基づいてツアーを開始することができます。
reactourは、シンプルで直感的なAPIを提供しており、迅速にツアーを構築したい場合に適しています。基本的な機能が充実しており、簡単な導入が可能です。
Showcase your app to new users or explain functionality of new features.
It uses react-floater for positioning and styling.
And you can use your own components too!
View the demo here (or the codesandbox examples)
Read the docs
Talk about it on the Discussions board.
npm i react-joyride
import Joyride from 'react-joyride';
export class App extends React.Component {
state = {
steps: [
{
target: '.my-first-step',
content: 'This is my awesome feature!',
},
{
target: '.my-other-step',
content: 'This another awesome feature!',
},
...
]
};
render () {
const { steps } = this.state;
return (
<div className="app">
<Joyride
steps={steps}
...
/>
...
</div>
);
}
}
If you need to support legacy browsers you need to include the scrollingelement polyfill.
Sponsored by
React Joyride is proud to be sponsored by Frigade, a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.
Setting up a local development environment is easy!
Clone (or fork) this repo on your machine, navigate to its location in the terminal and run:
npm install
npm link # link your local repo to your global packages
npm run watch # build the files and watch for changes
Now clone https://github.com/gilbarbara/react-joyride-demo and run:
npm install
npm link react-joyride # just link your local copy into this project's node_modules
npm start
Start coding! 🎉