react-wasm-bridge - GitLite

KO | EN

gitlite — search

#deep-learning #electron #ai #claude-code #large-language-models #rag #anthropic #typescript #agent #data-science

react-wasm-bridge

(★ 27)

Render react components in rust

File Explorer

ZIP Download

- index.js
- - .babelrc
  - .gitignore
  - Cargo.lock
  - Cargo.toml
  - index.js
  - Makefile
  - package.json
  - webpack.config.js
  - yarn.lock
- - .babelrc
  - .gitignore
  - Cargo.lock
  - Cargo.toml
  - index.html
  - index.js
  - Makefile
  - package.json
  - webpack.config.js
  - yarn.lock
- - .babelrc
  - .gitignore
  - Cargo.lock
  - Cargo.toml
  - index.html
  - index.js
  - Makefile
  - package.json
  - webpack.config.js
  - yarn.lock
- builder.rs
- context.js
- lib.rs
- ReactWasmBridge.js
.babelrc
.gitignore
Cargo.lock
Cargo.toml
Makefile
package.json
README.md
webpack.config.js
yarn.lock

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`cargo`

View Details ▼

Manage Rust projects and their module dependencies (crates).
Some subcommands such as `build` have their own usage documentation.

cargo search {{search_string}}

Search for crates:

cargo install {{crate_name}}

Install a binary crate:

cargo install --list

List installed binary crates:

🔍

`module`

View Details ▼

Modify a users' environment.

module avail

Display available modules:

module avail {{module_name}}

Search for a module by name:

module load {{module_name}}

Load a module:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Build react components with wasm modules (currently only with rust).

## Using react-wasm-bridge in your project

### Rust-side

Install rust nightly and set up a new rust library. Make sure you set the
`crate-type` to `"cdylib"` and add both `wasm-bindgen` and `react-wasm-bridge`
as dependencies.

Your module should export a function called `render` that takes two parameters:
`state` and `factory`.

```
#[wasm_bindgen]
pub fn render(state: &State, factory: &Builder) -> JsValue {
    ...
}
```

`state` is an object that holds the component props. You'll use `factory` to
generate elements and return a root elem (details TBD).

Build the module (`cargo +nightly build --target wasm32-unknown-unknown`) and
run it through `wasm-bindgen` (`wasm-bindgen
target/wasm32-unknown-unknown/$(MODE)/hello.wasm --out-dir .` or similar).

### React-side

Add `react-wasm-bridge` to your react project.  Then load your wasm module and
pass it to the `<ReactWasmBridge/>` component as the `module` prop. Any other
props will be passed to the underlying rust module into its `render` function
(strings and numbers only).

## Building the library

To build a transpiled version of the library, make sure you have all of these
things:

- yarn
- rust nightly
- wasm-bindgen

and run `make`.  The transpiled version will be output into `dist/`.

## Building the examples

Run `make examples` and it'll build all of them. Or just go into each example
directory to make them individually.

### Going faster

By default, the examples build in debug mode. Use `make run MODE=release` and
it'll build in release mode. If you've already built it, you'll have to `make
clean` or it won't rebuild.