https://github.com/zhanba/react-g

Building visualization component in declarative and composable way.
https://github.com/zhanba/react-g

canvas react

Last synced: 18 days ago
JSON representation

Building visualization component in declarative and composable way.

• Host: GitHub
• URL: https://github.com/zhanba/react-g
• Owner: zhanba
• License: mit
• Created: 2020-02-13T06:51:30.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T12:10:56.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T07:44:18.831Z (7 months ago)
• Topics: canvas, react
• Language: TypeScript
• Homepage:
• Size: 6.97 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-g

[![NPM version][npm-image-core]][npm-url-core]

[npm-image-core]: https://img.shields.io/npm/v/@react-g/core?label=%40react-g%2Fcore&style=plastic

[npm-url-core]: http://npmjs.org/package/@react-g/core

[![NPM version][npm-image-component]][npm-url-component]

[npm-image-component]: https://img.shields.io/npm/v/@react-g/component?label=%40react-g%2Fcomponent&style=plastic

[npm-url-component]: http://npmjs.org/package/@react-g/core

[![NPM version][npm-image-hooks]][npm-url-hooks]

[npm-image-hooks]: https://img.shields.io/npm/v/@react-g/hooks?label=%40react-g%2Fhooks&style=plastic

[npm-url-hooks]: http://npmjs.org/package/@react-g/core

Building visualization component in declarative and composable way.

## Install

```sh

npm i @react-g/core

npm i @react-g/component

npm i @react-g/hooks

```

## Example

```tsx

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 (

    

      

        

        

      

    

  );

};

export default App;

```

## Doc

- [@react-g/core](./packages/core/README.md)

- [@react-g/component](./packages/component/README.md)

- [@react-g/hooks](./packages/hooks/README.md)