# @antv/graphin-components > Components for graphin Latest version **2.4.1** (published 2023-06-25) · MIT license · 0 weekly downloads ## Install ```sh npm install @antv/graphin-components pnpm add @antv/graphin-components yarn add @antv/graphin-components bun add @antv/graphin-components ``` ## Health **Score 40/100 (D)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned. ## Facts | | | |---|---| | Version | 2.4.1 | | Published | 2023-06-25 | | First published | 2019-11-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 176.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1099 | | Maintainers | lvisei, yisi.wang, basketduck, biupiubiupiu, flash1, dreammy23, laixingui.lxg, zhangjunjie-loki, rainy25ghz, zeyuwang, yanxiong, susiwen8, freestyle21, soundquiet, elaine.q.10, sturuby, sakuya223, serializedowen, xdzhao, yangzhanmei, wjgogogo, leungwensen, dori, iaaron, yard, simaq, dxq613, intchous, susan_ann, jinke.li, 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 | ## Links - npm: https://www.npmjs.com/package/@antv/graphin-components - Repository: https://github.com/antvis/Graphin - Homepage: https://github.com/antvis/Graphin#readme - Issues: https://github.com/antvis/Graphin/issues - npm.io page: https://npm.io/package/@antv/graphin-components ## Dependencies (1) - [@antv/graphin](https://npm.io/package/@antv/graphin.md) ^2.7.18 ## Recent versions - 2.4.1 (latest) — 2023-06-25 - 1.0.3 (components/v1.0.3) — 2019-11-29 - 2.4.0 — 2021-09-22 - 2.3.0 — 2021-08-09 - 2.2.1 — 2021-08-06 - 2.2.0 — 2021-07-27 - 2.1.0 — 2021-07-14 - 2.0.7 — 2021-05-10 - 2.0.5 — 2021-03-26 - 2.0.1 — 2021-03-08 - 2.0.0 — 2021-02-22 - 2.0.0-beta.15 — 2021-02-22 - 2.0.0-beta.14 — 2021-02-19 - 2.0.0-beta.13 — 2021-02-09 - 2.0.0-beta.12 — 2021-02-05 - … 21 more at https://npm.io/package/@antv/graphin-components/versions ## README ![](https://img.shields.io/badge/language-typescript-red.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/graphin-components.svg)](https://www.npmjs.com/package/@antv/graphin) [![NPM downloads](http://img.shields.io/npm/dm/@antv/graphin.svg)](https://npmjs.org/package/@antv/graphin) [![Build Status](https://travis-ci.org/antvis/graphin.svg?branch=master)](https://travis-ci.org/antvis/graphin) ## @antv/graphin-components [中文](./README-cn.ZH.md) This is Graphin's library of pre-built React components for common analytical use cases. Graphin is a graph analysis solution based on [G6 4.x](https://github.com/antvis/g6). Components list: | Component | Category | Description | | --------------- | ----------------------------- | --------------------------------------------------------------------------- | | ContextMenu | Interactive Component | Help users perform node or edge operations such as tagging or expansion | | Tooltip | Interactive Component | Help users quickly browse node or edge information | | MiniMap | Interactive Component | Help users to navigate around the canvas | | Toolbar | Interactive Component | Help users with canvas operations: zoom out, zoom in, full screen etc. | | RedoUndo | Interactive Component | Help users manage graph history | | FishEye | Interactive Component | Help users to enlarge cluttered graph details | | CreateEdge | Interactive Component | Help users draw connections between nodes | | Legend | Labeling Component | Displays categorical information about nodes and/or edges | | Hull | Labeling Component | Help users group similar nodes together | | Statistic | Labeling Component | Help users monitor canvas information | | SnapshotGallery | Analytical Component | Provide snapshot saving and replaying function as part of an image carousel | | LayoutSelector | Analytical Component | Help users switch layouts and configure layout options for optimal display | | Sheetbar | Analytical Component | Help users analyze and manage multiple canvases | | TableMode | Analytical Component | Help users view relational data as tables | | FindPathPanel | Algorithm Based Component | Help users calculate the shortest path and possible paths between two nodes | | MapMode | Advanced Analytical Component | Help users analyze geospatial relational data | | Timebar | Advanced Analytical Component | Help users analyze time series relational data | ## Install ```bash npm install @antv/graphin-components --save ``` UMD bundle is available in [releases](https://github.com/antvis/Graphin/releases). Peer dependencies: react, react-dom, antd. ## Usage ```tsx import React from 'react'; import ReactDOM from 'react-dom'; import Graphin, { Utils } from '@antv/graphin'; import { Toolbar } from '@antv/graphin-components'; // Do not forget to import required CSS const App = () => { const data = Utils.mock(10).graphin(); return (
); }; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement); ``` ## Docs Please refer to [Graphin Docs - Components](https://graphin.antv.vision/zh/docs/manual/main-concepts/components) ## APIs Please refer to [Graphin Components API Doc](https://graphin.antv.vision/zh/docs/api/components) --- _Source: https://npm.io/package/@antv/graphin-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._