@antv/g6-react-node
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.4 • Public • Published

    G6 React Node

    Using React Component to custom your g6 node

    Docs

    https://dicegraph.github.io/

    Example

    import {
      Group,
      Rect,
      Text,
      Circle,
      Image,
      createNodeFromReact,
    } from '@antv/g6-react-node';
    const ReactNode = ({ cfg = {} }) => {
      const { description, meta = {}, label = 'label' } = cfg;
      return (
        <Group>
          <Rect>
            <Rect
              style={{
                width: 150,
                height: 20,
                fill: cfg.color,
                radius: [6, 6, 0, 0],
                cursor: 'move',
                stroke: cfg.color,
              }}
              draggable="true"
            >
              <Text
                style={{
                  marginTop: 2,
                  marginLeft: 75,
                  textAlign: 'center',
                  fontWeight: 'bold',
                  fill: '#fff',
                }}
              >
                {label}
              </Text>
            </Rect>
            <Rect
              style={{
                width: 150,
                height: 55,
                stroke: cfg.color,
                fill: '#ffffff',
                radius: [0, 0, 6, 6],
              }}
            >
              <Text style={{ marginTop: 5, fill: '#333', marginLeft: 4 }}>
                Desc: {description}
              </Text>
              <Text style={{ marginTop: 10, fill: '#333', marginLeft: 4 }}>
                Creator: {meta.creatorName}
              </Text>
            </Rect>
          </Rect>
          <Circle
            style={{
              stroke: cfg.color,
              r: 10,
              fill: '#fff',
              marginLeft: 75,
              cursor: 'pointer',
            }}
            name="circle"
          >
            <Image
              style={{
                img:
                  'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
                width: 12,
                height: 12,
                marginLeft: 69,
                marginTop: -5,
              }}
            />
          </Circle>
        </Group>
      );
    };
    G6.registerNode('yourNode', createNodeFromReact(ReactNode));

    Keywords

    none

    Install

    npm i @antv/g6-react-node

    DownloadsWeekly Downloads

    30

    Version

    1.4.4

    License

    none

    Unpacked Size

    1.82 MB

    Total Files

    102

    Last publish

    Collaborators

    • iaaron
    • wjgogogo
    • yangzhanmei
    • jinke.li
    • susan_ann
    • yard
    • intchous
    • soundquiet
    • lviser
    • freestyle21
    • serializedowen
    • sturuby
    • xdzhao
    • elaine.q.10
    • sakuya223
    • leungwensen
    • dori
    • simaq
    • dxq613
    • lzxue
    • army8735
    • atool
    • baizn
    • dengfuping
    • neoddish
    • jeffy2012
    • zqlu
    • afc163
    • pomelo-nwu
    • kopiluwaky
    • ccnuzindex
    • panyuqi
    • bubkoo
    • zengyue
    • kasmine
    • boyu.zlj
    • l1ud0ngq1
    • newbyvector
    • winniexing
    • chenluli
    • kn9117
    • xdddst
    • semious2020
    • esora
    • nadia_liu
    • bbsqq
    • mxz96102
    • openwayne
    • pearmini
    • pddpd
    • yiqianyao
    • zhanba
    • cxxxxxn