question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot use react-graph-vis with typescript

See original GitHub issue

I’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:closed
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

8reactions
ChadJPetersencommented, Aug 3, 2020

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

5reactions
ghostcommented, Mar 21, 2020

instead of “import Graph from 'react-graph-vis” try "import Graph from ‘vis-react’ "

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found