-
Create a react/nextjs app
-
create a rust lib with cargo in the web app folder
Created library `wasm-lib`package`
-
Add the wasm-bidgen dependency in rust
[package] name = "wasm-lib" version = "0.1.0" edition = "2021" +[lib] +crate-type = ["cdylib"] [dependencies] +wasm-bindgen = "0.2.78"
-
add wasm-bindgen to your function
+use wasm_bindgen::prelude::\*; +#[wasm_bindgen] pub fn add(a: i32, b: i32) -> i32 { a + b } #[test] fn add_test() { assert_eq!(1 + 1, add(1, 1)); }
-
on the react root project folder run the following:
cargo install wasm-pack
-
add the following to package.json
"build:wasm": "cd wasm-lib && wasm-pack build --target web --out-dir pkg",
-
npm run build:wasm
-
npm install ./wasm-lib/pkg
-
Call the wasm function into the app
import and call import React, { useEffect, useState } from 'react'; +import init, { add } from "wasm-lib"; import logo from './logo.svg'; import './App.css'; function App() { - const [ans, setAns] = useState(0); - useEffect(() => { - init().then(() => { - setAns(add(1, 1)); - }) - }, []) return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.tsx</code> and save to reload. </p> - <p>1 + 1 = {ans}</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;