Package Exports
- trail-js
Readme
🧭 trail-js
A flexible, minimalistic walkthrough library for React apps. Build guided user tours with step-by-step overlays, tooltips, and logic-based navigation. Perfect for onboarding, product tours, and in-app guidance—fully customizable and framework-agnostic.
🚀 Try the Interactive Demo
Explore a live walkthrough experience using all of trail-js' features.
Conditional steps, lifecycle events, custom UIs—see it all in action.
Click, explore, and learn how powerful simple guidance can be!
🧰 Features
- 🪄 Step-by-step Overlays: Highlight any DOM element with tooltips and callouts.
- 🎛️ Custom Navigation UI: Override navigation controls with your own components.
- ⚡ Conditional Logic: Use
canGoNext()to enable/disable step transitions. - 🔁 Lifecycle Hooks: Add
onEntercallbacks for side effects or state updates. - 🧠 State-Aware: Dynamically change steps based on your app state.
- 🎨 Custom Styling: Control placement, animation, and appearance of tooltips.
- 🔌 Framework-Agnostic API: Bring your own UI components and controls.
- 📦 Fully Typed: TypeScript-first developer experience.
📦 Installation
# npm
npm install trail-js📘 API Reference
| Property | Type | Description |
|---|---|---|
selector |
string |
CSS selector to attach tooltip |
content |
ReactNode |
Tooltip content |
placement |
"top" | "bottom" | "left" | "right" |
Position relative to target |
canGoNext |
() => boolean |
Optional function to gate progress |
onEnter |
() => void |
Callback fired when step is shown |
customNavigation |
({ goNext, goPrev, close }) => JSX |
Custom nav component override |