Add rs-grid-leptos to your Cargo.toml:
Cargo.toml
[dependencies]
rs-grid-leptos = { path = "../rs-grid-leptos" }
Import the component and mount it inside a Leptos view:
src/main.rs
use leptos::*;
use rs_grid_leptos::GridCanvas;
#[component]
pub fn App() -> impl IntoView {
view! {
<main style="width: 100vw; height: 100vh;">
<GridCanvas
rows=1_000_000_u64
cols=50_usize
/>
</main>
}
}
fn main() {
leptos::mount_to_body(App);
}
Run the example:
cd examples/basic-leptos
trunk serve
Build the WASM package:
cd crates/rs-grid-web
wasm-pack build --target web
Use it in your HTML:
index.html
<canvas id="grid" style="width: 100vw; height: 100vh;"></canvas>
<script type="module">
import init, { JsGrid } from './pkg/rs_grid_web.js';
await init();
const canvas = document.getElementById('grid');
const grid = new JsGrid(canvas, 1_000_000, 50);
</script>
Add rs-grid-dioxus to your Cargo.toml:
Cargo.toml
[dependencies]
rs-grid-dioxus = { path = "../rs-grid-dioxus" }
Import the component and mount it inside a Dioxus app:
src/main.rs
use dioxus::prelude::*;
use rs_grid_dioxus::{GridCanvas, ModelSlot};
use rs_grid_core::model::GridModel;
fn App() -> Element {
let model = use_hook(|| {
ModelSlot::new(GridModel::new(1_000_000, 50))
});
rsx! {
main { style: "width:100vw;height:100vh;",
GridCanvas { model: model.clone() }
}
}
}
fn main() {
dioxus::launch(App);
}
Run the example:
cd examples/basic-dioxus
trunk serve
Add rs-grid-yew to your Cargo.toml:
Cargo.toml
[dependencies]
rs-grid-yew = { path = "../rs-grid-yew" }
Import the component and mount it inside a Yew app:
src/main.rs
use yew::prelude::*;
use rs_grid_yew::{GridCanvas, wrap_model};
use rs_grid_core::model::GridModel;
#[function_component]
fn App() -> Html {
let model = wrap_model(GridModel::new(1_000_000, 50));
html! {
<main style="width:100vw;height:100vh;">
<GridCanvas model={model} />
</main>
}
}
fn main() {
yew::Renderer::<App>::new().render();
}
Run the example:
cd examples/basic-yew
trunk serve
Leptos
Vanilla JS
Dioxus
Yew