React Integration

import { jsx } from '@blinkorb/rcx/jsx-runtime';

const ReactComponent = () => {
  const [count, setCount] = useState(0);

  const onCanvasChanged = useRCXInReact(
    () => jsx(CanvasApp, { count }),
    [count]
  );

  return (
    <>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <canvas className="h-100 w-full" ref={onCanvasChanged} />
    </>
  );
};

/** @jsxImportSource @blinkorb/rcx */

const Example: RCXComponent<{ count: number }> = ({ count }) => {
  const { width, height } = useCanvasContext();

  return (
    <Text
      x={width * 0.5}
      y={height * 0.5}
      style={{
        fill: 'white',
        align: 'center',
        baseline: 'middle',
        fontSize: 100,
      }}
    >
      {count}
    </Text>
  );
};

{
  rules: {
    'react-hooks/exhaustive-deps': [
      'error',
      {
        additionalHooks: '(useRCXInReact)',
      },
    ],
  }
}