Cannot use react-graph-vis with typescript

[Pacheco95]

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;

[Deleted user]

instead of "import Graph from 'react-graph-vis" try "import Graph from 'vis-react' "

[dtseng123]

It is because there isn't a type declaration file.
A workaround is to add a declaration to your typings.d.ts file.

declare module "react-graph-vis";

[ChadJPetersen]

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

[strican]

Thanks @ChadJPetersen, that seems to be working for me. Would be cool if this could be published as a @types/react-graph-vis package.

[mohamed-karim-rebey]

Hi, I'm trying to add the react-graph-vis feature to my application and I don't know where to put the new configuration.