How to access values and Data from needle Unity Components from react/Vanilla JS

I want to show some Values that is available in this.context of needle and i want to set some values based on some fields from HTML but dont want to use db to send data from React to needle any suggestion will be nice.

Original Post on Discord

by user 406778568597831690

Hi, super easy :slightly_smiling_face:

You can listen e.g. to the context being registered via:

NeedleEngine.addContextCreatedCallback(args => { args.context .... } );

and then use it to query either components in the scene with the GameObject.findObjectOfType methods or directly access things in the scene or context.

Or you can make things/components static that you know you’re interested in and expose them (via static get Instance() { } in your component, similar to a singleton pattern if you are familiar with that)

Let me know if you need an example (there’s an example (JS Interop) in the sampels too) or you can have a look at Needle-engine - Vite Template (forked) - StackBlitz

i am still confused let say, I want to show how many users have joined in a room I want to show on UI using

Tag.

other Use case once I click on a button created using HTML button I want to change the Material of a object.

these are some sample scenarios if possible please share the sample script or Example scene where its covered

by user 406778568597831690

Here’s an example on how to get the users in a room: Needle-engine - Access Users in Room from External Code - StackBlitz

it’s inside the main.ts but it would be exactly the same in any js script

Do you already have a reference to the material you want to change? How do you select which object you want to change? There are many ways to do it (get all renderers, get a specific component on the object that you want to change…). What’s your usecase?

Are you more familiar with Unity and C# or with webdev?

i am more familier with C#

by user 406778568597831690

So you can have a component that references a html element on your website and registers on the ClickEvent or you can have a button in javascript directly manipulating materials. That depends a bit on your usecase and what your goal is.

Both ways work

i don’t want to use singleton i want to do it with events, if possible, please share some sample on how to trigger an event from JS and receive it in unity Typescript component,

by user 406778568597831690

Trigger an event from e.g. a HTML button? / Receiving a HTML button click event in a component?

image.png

by user 406778568597831690

image.png

by user 406778568597831690

tried it this way doesn’t work

by user 406778568597831690

Because you dont set the instance? Try setting it in awake() { meetingControls.instance = this; }