TestSignals example.hx

import react.ReactMacro.jsx;
import store.TestSignals;
using Std;

@:expose('App')
@:native('App')
function App() {
	js.Lib.require('./App.css');

	TestSignals.initValue = Hopp(222);
	var signal:HookState<TestSignalsData> = TestSignals.useSignalState();
	return jsx('<div className="App">    
        <h1>AppX</h1>
        <p>{signal.value.string()}</p>
        <button onClick=${e -> signal.value = Hopp(123)}>Hej</button>
    </div>');
}

TestSignals.hx

package store;

using react.ReactHooks;

enum TestSignalsData {
	Hej;
	Hopp(v:Int);
}

@:jsRequire('./store/TestSignals', 'TestSignals')
extern class TestSignals {
	static var initValue:TestSignalsData;
	static function useSignalState(?init:TestSignalsData):HookState<TestSignalsData>;
}

TestSignals.js

import Signal from 'signals';
import React from 'react';

export var TestSignals = function () { }
TestSignals.initValue = null; // Set initial value here
TestSignals.signal = new Signal(TestSignals.initValue);

TestSignals.useSignalState = function () {
    var [status, setStatus] = React.useState(TestSignals.initValue);
    React.useEffect(() => {
        function onChange(v) {
            setStatus(v);
        }
        TestSignals.signal.add(onChange);
        return () => TestSignals.signal.remove(onChange);
    }, []);
    return [status, TestSignals.signal.dispatch];
}