Cannot use react-graph-vis with typescript
See original GitHub issueI’m trying to use the lib in a TS project, but I’m getting this error:
Could not find a declaration file for module 'react-graph-vis'
I tried yarn add @types/react-graph-vis
but yarn tell me type definitions does not exists for this lib.
Any way to solve this issue?
import React, { useState } from 'react';
import Graph from 'react-graph-vis';
const graph = {
nodes: [
{ id: 1, label: 'Node 1', color: '#e04141' },
{ id: 2, label: 'Node 2', color: '#e09c41' },
{ id: 3, label: 'Node 3', color: '#e0df41' },
{ id: 4, label: 'Node 4', color: '#7be041' },
{ id: 5, label: 'Node 5', color: '#41e0c9' },
],
edges: [
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
],
};
const options = {
layout: {
hierarchical: false,
},
edges: {
color: '#000000',
},
};
const events = {
select(event) {
const { nodes, edges } = event;
console.log('Selected nodes:');
console.log(nodes);
console.log('Selected edges:');
console.log(edges);
},
};
const Home = () => {
const [network, setNetwork] = useState(null);
return (
<div className="Home">
<Graph
graph={graph}
options={options}
events={events}
getNetwork={(networ: any) => {
// if you want access to vis.js network api you can set the state in a parent component using this property
setNetwork(network);
}}
/>
</div>
);
};
export default Home;
Issue Analytics
- State:
- Created 4 years ago
- Comments:5
Top Results From Across the Web
react-graph-vis - npm
React graph vis. A React component to display beautiful network graphs using vis.js. Show, don't tell: Demo.
Read more >Could not find a declaration file for module ''react-materialize ...
I had this issue when I added react-router-dom to the new CRA app using typescript.
Read more >react-graph-vis - Bountysource
A react component to render nice graphs using vis.js. Become a Bounty Hunter You're a Bounty Hunter ... TypeScript types were merged in...
Read more >react-graph-vis examples - CodeSandbox
Learn how to use react-graph-vis by viewing and forking example apps that make use of react-graph-vis on CodeSandbox. islanders-guideShows scores of buildings ...
Read more >Google Visualization API Reference | Charts
Constructor. Syntax. DataTable(opt_data, opt_version). opt_data: [Optional] Data used to initialize the table. This ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’m pretty new to Typescript. So not sure if this is the best way to define the module. But this has been working well for me!
https://gist.github.com/ChadJPetersen/2e2587bbd753c6a384c02519183e2031
instead of “import Graph from 'react-graph-vis” try "import Graph from ‘vis-react’ "