diff --git a/docs/EXAMPLES.md b/docs/EXAMPLES.md index 594baf3..0cb4c1e 100644 --- a/docs/EXAMPLES.md +++ b/docs/EXAMPLES.md @@ -332,239 +332,3 @@ function ThemeDemo() { ); } ``` - -## Example 4: Multiple Tours in One App - -Manage different tours for different user flows (onboarding, feature discovery, etc). - -```tsx -import { useEffect, useState } from 'react'; -import { View, Text, Button, ScrollView } from 'react-native'; -import { - CoachmarkProvider, - CoachmarkAnchor, - CoachmarkOverlay, - createTour, - useCoachmark, -} from '@edwardloopez/react-native-coachmark'; - -function MainApp() { - const [userType, setUserType] = useState<'new' | 'returning'>('new'); - const { start, isActive } = useCoachmark(); - - // Tour 1: First-time user onboarding - const onboardingTour = createTour('onboarding-new-user', [ - { - id: 'welcome-banner', - title: '🎉 Welcome!', - description: 'This is your new dashboard. Let\'s explore key features.', - placement: 'bottom', - shape: 'rect', - }, - { - id: 'main-actions', - title: 'Main Actions', - description: 'Create, edit, or view your content here', - placement: 'top', - shape: 'rect', - radius: 12, - }, - { - id: 'profile-menu', - title: 'Your Profile', - description: 'Access settings, preferences, and account info', - placement: 'bottom', - shape: 'circle', - padding: 16, - }, - ], { - delay: 500, - showOnce: true, // Only show once per user - }); - - // Tour 2: Feature discovery for returning users - const featureDiscoveryTour = createTour('feature-discovery', [ - { - id: 'new-feature-badge', - title: '✨ New Feature!', - description: 'We\'ve added a powerful new search capability', - placement: 'bottom', - }, - { - id: 'search-bar', - title: 'Advanced Search', - description: 'Find anything instantly with smart filters', - placement: 'bottom', - autoFocus: 'ifNeeded', - }, - ], { - delay: 2000, - showOnce: true, - }); - - // Tour 3: Quick tips (can be triggered manually) - const quickTipsTour = createTour('quick-tips', [ - { - id: 'bulk-actions', - title: 'Pro Tip: Bulk Actions', - description: 'Select multiple items with checkboxes, then act on all at once', - placement: 'top', - onEnter: () => console.log('Tip viewed: Bulk Actions'), - }, - { - id: 'keyboard-shortcuts', - title: 'Pro Tip: Shortcuts', - description: 'Press ? to see all keyboard shortcuts', - placement: 'bottom', - }, - ]); - - useEffect(() => { - // Auto-start appropriate tour based on user type - if (!isActive) { - if (userType === 'new') { - start(onboardingTour); - } else { - start(featureDiscoveryTour); - } - } - }, [userType]); - - const handleStartTips = () => { - start(quickTipsTour); - }; - - const toggleUserType = () => { - setUserType(userType === 'new' ? 'returning' : 'new'); - }; - - return ( - - - {/* Welcome Banner */} - - - - Welcome, User! - - - {userType === 'new' ? 'First time here? Let\'s get started!' : 'Welcome back!'} - - - - - {/* Main Actions */} - - -