Interaction with React UI elements

[javisweng]

I've been exploring an integration between 🔄 Bevy and React GUI to enable communication 📬 between UI actions in React and Bevy's logic handling 🧠.

🛠 Implementation Snapshot:
I utilized winit's event_loop_proxy to send messages. Below is a snippet of how I managed to send messages to Bevy from React by modifying winit_runner method:

Event::UserEvent(BinaryMessage(message)) => {
    let mut system_state: SystemState<EventWriter<PlatformEvent>> =
        SystemState::new(&mut app.world);
    let mut platform_event = system_state.get_mut(&mut app.world);
    platform_event.send(PlatformEvent(message));
}

In Bevy app initialization code, I ensured the event loop proxy is accessible to send messages:

let event_loop = app
    .world
    .get_non_send_resource::<EventLoop<BinaryMessage>>()
    .unwrap();
let event_loop_proxy = event_loop.create_proxy();
let engine = Engine { event_loop_proxy };

❓ Seeking Feedback:

Is this approach aligning with Bevy’s design principles and best practices?
Can this be optimized further for more efficient message passing?
Curious if anyone has implemented something similar or has thoughts on this method!
I'm excited to hear any thoughts or suggestions and to discuss further! 🚀

[ycysdf]

dioxus is a React-like library written in rust.
This is an integration of dioxus and bevy that I implemented: https://github.com/ycysdf/bevy_dioxus.

[javisweng]

Thank you for sharing, I will definitely take a look.