4 releases (2 breaking)
0.2.0 | Feb 15, 2023 |
---|---|
0.1.0 | Aug 23, 2022 |
0.0.2 | Jan 8, 2022 |
0.0.1 | Feb 19, 2021 |
#339 in WebAssembly
189 downloads per month
48KB
447 lines
Observable-react
So you want to use wasm_bindgen to add rust to you existing React app, or you're not quite ready for the rust web frameworks?
There are lots of examples out there demonstrating WASM for computationally intensive workloads, but how do you hook into React component rendering?
This crate wraps observable-rs, providing wasm_bindgen compatibility with React bindings
Example Usage
import React, { useMemo, useReducer } from "react";
import { useObserve } from "observable-rs";
function App({ wasm }: { wasm: any }) {
let [listVisible, toggleShow] = useReducer((show: boolean) => { return !show }, true);
let [thing, the_list] = useMemo(() => {
let thing = wasm.create_rust_thing();
setInterval(() => thing.do_something(), 1000);
return [thing, thing.get_the_list()];
}, [wasm]);
return (
<div className="App">
<button onClick={toggleShow}>{listVisible ? "Hide the list" : "Show the List"} </button><br />
{ listVisible ? <TheList the_list={the_list} /> : ''}
</div>
);
}
export default App;
function TheList({ the_list }: { the_list: any }) {
// Bind this observable to the react component
useObserve(the_list);
return (
<div>The List:<br />
<ul>
{the_list.map((v: any) => (
<li key={v}>{v}</li>
))}
</ul>
</div>
)
}
Example setup:
First, follow the setup instructions here to create a react app with a bundled rust crate:
https://dev.to/lokesh007/webassembly-with-rust-and-react-using-create-react-app-67
NOTES:
- Suggest you use the typescript flag when creating your react app:
npx create-react-app your_react_app --template typescript
- Change .config-overrides.json
extraArgs: "--no-typescript"
toextraArgs: ""
- your wasm build output dir (specified in config-overrides.json) must be inside or symlinked within your react app src directory in order to be bundled
Then:
cd your_react_app
# This adds the useObserve() helper function to your react app
npm i observable-rs
# Your rust crate for application logic, to be compiled to WASM
cd your_wasm_crate_dir
# Add this crate
cargo add observable-react
cd your_react_app
npm serve
For a working example, see example react app
NOTE: Because wasm_bindgen is not currently able to bundle javascript helper functions, you must install the following npm package in your react app observable-rs
Dependencies
~2–5MB
~76K SLoC