yew-tou-rs

Onboarding Tour for Yew Framework in Rust.

Links

Overview

This library provides an onboarding tour for applications built using the Yew framework in Rust.

Demo

You can see the demo here:

Live Demo

Run Example

trunk serve

Visit http://localhost:8080 in your browser.

Usage

Add the following to your Cargo.toml:

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

Add the following to your index.html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/7.2.0/introjs.css">

See Intro.js for more information about its license.

Add the following to your App.rs:

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

#[function_component(App)]
pub fn app() -> Html {
    let steps = vec![
        TourStep {
            selector: ".h1-step".to_string(),
            content: "This is a title".to_string(),
        }
    ];
    html! {
        <div class="app">
            <h1 class="h1-step">{"Hello, Yew Tou-rs"}</h1>
            <Tour steps={steps} />
        </div>
    }
}

Features

Storage

If you enable the storage feature, closed tours will not be shown again:

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

Markdown

If you enable the markdown feature, you can use markdown in the content:

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

let steps = vec![
    TourStep {
        selector: ".app".to_string(),
        content: "### Welcome to the tour\n\
            You can find a full demo on [Konnektoren](https://konnektoren.help)".to_string(),
    },
];

Similiar Projects

• Reactour for React
• Intro.js for Vanilla JS

License

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