this package provider a Vue like api for @my-react, you can use it to create reactive hook and component
import { reactive, createReactive, onMounted, onUnmounted } from "@my-react/react-reactive";
const useReactiveApi_Position = () => {
const position = reactive({ x: 0, y: 0 });
let id = null;
const action = (e) => ((position.x = e.clientX), (position.y = e.clientY));
onMounted(() => {
window.addEventListener("mousemove", action);
});
onUnmounted(() => {
window.removeEventListener("mousemove", action);
});
return position;
};
const Reactive1 = createReactive({
setup(props, context) {
const position = useReactiveApi_Position();
const data = reactive({ a: 1 });
const click = () => data.a++;
return { data, click, position };
},
});
const App = () => {
return (
<Reactive1 title="hello">
{({ data, click, position, title }) => (
<>
<p>{data.a}</p>
<button onClick={click}>click</button>
<p>
{position.x} {position.y}
</p>
{title}
</>
)}
</Reactive1>
);
};