react-g-canvas

react-g

Building visualization component in declarative and composable way.

Install

npm i @react-g/core
npm i @react-g/component
npm i @react-g/hooks

Example

import React, { useState, useEffect } from 'react';
import { Canvas, Group, Rect, Text } from '@react-g/core';

const App: React.FC = () => {
  const [color, setColor] = useState('yellow');

  useEffect(() => {
    const timer = setTimeout(() => {
      setColor('green');
    }, 3000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <Canvas width={1000} height={800}>
      <Group>
        <Rect x={10} y={10} width={100} height={50} fill={color} stroke="#456734" />
        <Text x={200} y={60} text="test" fill="black" />
      </Group>
    </Canvas>
  );
};

export default App;

Doc

• @react-g/core
• @react-g/component
• @react-g/hooks