Macro wasm_react::export_components

macro_rules! export_components {
    {} => { ... };
    { $Component:ident $( , $( $tail:tt )* )? } => { ... };
    { $Component:ty as $Name:ident $( , $( $tail:tt )* )? } => { ... };
}

This macro can be used to expose your Component for JS consumption via wasm-bindgen.

Requirement is that you implement the TryFrom<JsValue, Error = JsValue> trait on your component and that you do not export anything else that has the same name as your component.

Therefore, it is only recommended to use this macro if you’re writing a library for JS consumption only, or if you’re writing a standalone application, since this will pollute the export namespace, which isn’t desirable if you’re writing a library for Rust consumption only.

Example

Implement TryFrom<JsValue, Error = JsValue> on your component and export it:

pub struct Counter {
  counter: i32,
}

impl Component for Counter {
  /* ... */
}

impl TryFrom<JsValue> for Counter {
  type Error = JsValue;

  fn try_from(value: JsValue) -> Result<Self, Self::Error> {
    let diff = Reflect::get(&value, &"counter".into())?
      .as_f64()
      .ok_or(JsError::new("`counter` property not found"))?;

    Ok(Counter { counter: diff as i32 })
  }
}

export_components! { Counter }

In JS, you can use it like any other component:

import React from "react";
import init, { Counter } from "./path/to/pkg/project.js";

function SomeOtherJsComponent(props) {
  return (
    <div>
      <Counter counter={0} />
    </div>
  );
}

You can export multiple components and also rename them:

export_components! { App as CounterApp, Counter }