Crate yew_tou_rs

A library for creating interactive tours in Yew applications.

yew-tou-rs provides an easy way to implement guided tours in web applications built with the Yew framework. It allows developers to create step-by-step tutorials that highlight different elements of their user interface.

Features

• Easy integration with Yew components
• Customizable tour steps
• Optional storage feature for persisting tour state
• Optional Markdown support for tour content

Usage

To use this library, add the following to your Cargo.toml:

[dependencies]
yew-tou-rs = { git = "https://github.com/chriamue/yew-tou-rs" }

For optional features, add:

[dependencies]
yew-tou-rs = { git = "https://github.com/chriamue/yew-tou-rs", features = ["storage", "markdown"] }

Then, in your Rust code, import the prelude to access the main components:

use yew_tou_rs::prelude::*;

Example

Here’s a basic example of how to use the Tour component in a Yew application:

use yew::prelude::*;
use yew_tou_rs::prelude::*;

#[function_component(App)]
fn app() -> Html {
    let tour_config = TourConfig {
        id: Some("main-tour".to_string()),
        steps: vec![
            TourStep {
                selector: ".intro-element".to_string(),
                content: "Welcome to our app! This is the first step of the tour.".to_string(),
            },
            TourStep {
                selector: "#feature-button".to_string(),
                content: "Click here to see our main feature.".to_string(),
            },
            TourStep {
                selector: ".help-section".to_string(),
                content: "If you need help, you can always find it here.".to_string(),
            },
        ],
    };

    html! {
        <div>
            <h1 class="intro-element">{"Welcome to Our App"}</h1>
            <button id="feature-button">{"Main Feature"}</button>
            <div class="help-section">{"Help & Support"}</div>

            <Tour steps={tour_config.steps} />
        </div>
    }
}

Modules

• config: Defines the TourConfig struct for configuring tours.
• step: Contains the TourStep struct for individual tour steps.
• tour: Implements the main Tour component.
• Other modules provide supporting functionality and components.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Modules

• prelude
  Prelude module for convenient imports of commonly used items.