Home / Companies / LogRocket / Blog / Post Details
Content Deep Dive

Using React Shepherd to build a site tour

Blog post from LogRocket

Post Details
Company
Date Published
Author
Onuorah Bonaventure
Word Count
4,524
Language
-
Hacker News Points
-
Summary

React Shepherd is an open-source library that simplifies the creation of site tours in React applications by wrapping around the Shepherd.js library. It offers two primary methods for creating tours: React Hooks and React Context, with the latter being the more convenient option. This tutorial demonstrates how to set up a site tour using React Shepherd by defining steps and tour options, which include customizable features like navigation, buttons, and dialog attachments to elements on the page. The library is noted for its lightweight nature, accessibility features, and global state management capabilities. The tutorial walks through the implementation of a tour in a React project, involving the setup of steps with various configurations and the integration of a tour start button in the sidebar. Additionally, the tutorial highlights React Shepherd's ability to handle advanced functions, such as routing between pages without interrupting the tour. The library is praised for its elegant UI and ease of use compared to other available tools for creating site tours.