A powerful React-based touring library that provides essential tools for creating interactive, guided tours, popovers, and utilities to enhance user experiences on web applications.

React Explore Kit 🚀

React-Explore Kit

A powerful React-based touring library that provides essential tools for creating interactive, guided tours, popovers, and utilities to enhance user experiences on web applications.

---

🚀 Features

• Touring Components: Create guided tours for web applications with customizable steps.
• Popover Management: Simple popovers with easy-to-use APIs.
• Masking & Highlighting: Highlight key UI elements during onboarding.
• Utility Functions: Essential helper utilities for smooth UI interactions.
• TypeScript Support: Fully typed for better developer experience.
• Highly Customizable: Offers flexibility with styling and behavior modifications.

---

📦 Installation

To install the package via npm or yarn:

npm install @react-explore-kit/tour
# or
yarn add @react-explore-kit/tour

🚀 Quick Start

1️⃣ Basic Usage

import { Tour } from '@react-explore-kit/tour';

const steps = [
  { selector: '#step1', content: 'This is the first step' },
  { selector: '#step2', content: 'This is the second step' }
];

export default function App() {
  return <Tour steps={steps} />;
}

2️⃣ Popover Component

import { Popover } from '@react-explore-kit/popover';

<Popover content="Hello, World!">
  <button>Hover me</button>
</Popover>;

3️⃣ Mask Component

import { Mask } from '@react-explore-kit/mask';

<Mask selector="#important-section" />;

---

📚 API Reference

<Tour />

Prop	Type	Description
steps	Array	List of steps in the tour
onFinish	Function	Callback when tour completes

<Popover />

Prop	Type	Description
content	string	Text to display in popover

<Mask />

Prop	Type	Description
selector	string	CSS selector of element to mask

---

🎨 Customization

This library provides flexibility in customization:

<Tour
  steps={steps}
  theme={{
    arrowColor: 'red',
    backgroundColor: 'black',
    textColor: 'white'
  }}
/>

---

🛠 Development

Clone the Repository

git clone https://github.com/react-explore-kit/ReactExploreKit.git
cd ReactExploreKit

Install Dependencies

npm install

Run the Development Server

npm start

---

🤝 Contributing

We welcome contributions! If you'd like to improve this library, follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Commit your changes (git commit -m 'Add new feature').
4. Push to the branch (git push origin feature-branch).
5. Open a pull request.

---

📜 License

This project is licensed under the MIT License.

---