react-native-vis-network
v2.0.0
Published
Use vis-network in your React Native projects
Downloads
31
Readme
react-native-vis-network
react-native-vis-network lets you use vis-network in your React Native projects.
iOS example
Android example
Installation
# react-native-vis-network needs to use react-native-webview to work correctly,
# so install it if you haven't previously installed it in your project
npm install react-native-webview
npm install react-native-vis-network
Usage
import React, { useState } from 'react';
import VisNetwork, { Data } from 'react-native-vis-network';
export default function MyComponent() {
const [data, setData] = useState<Data>({
edges: [
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 },
],
nodes: [
{ id: 1, label: 'Node 1' },
{ id: 2, label: 'Node 2' },
{ id: 3, label: 'Node 3' },
{ id: 4, label: 'Node 4' },
{ id: 5, label: 'Node 5' },
],
});
return <VisNetwork data={data} />;
}
Event Listeners
You can add event listeners for any vis-network Event.
Note that the earliest time you can successfully add an event listener is during the onLoad
callback. If you try to add an event listener before then your callback won't be called.
export default function MyComponent() {
const [loading, setLoading] = useState<boolean>(false);
const visNetworkRef = useRef<VisNetworkRef>(null);
useEffect(() => {
if (!loading || !visNetworkRef.current) {
return;
}
const subscription = visNetworkRef.current.addEventListener(
'click',
(event: any) => console.log(JSON.stringify(event, null, 2))
);
return subscription.remove;
}, [loading]);
// ...
return (
<VisNetwork
data={data}
onLoad={() => setLoading(true)}
ref={visNetworkRef}
/>
);
}
Methods
You can use any of the vis-network methods that are not discussed in the caveats below.
Caveats
- It's not possible to use the following methods due to their non-serializable parameters:
- It's not possible to use the following methods due to various issues discussed in 87da46d:
- Intentionally, the methods
on
,off
, andonce
have not been implemented. Instead, useaddEventListener
as described in Event Listeners. - While using methods like
addEdgeMode
,addNodeMode
,setData
, andsetOptions
will successfully update and re-render the network, they will not update thedata
oroptions
props passed intoVisNetwork
. Using any of these methods will cause the props to become out-of-sync with what is actually displayed.
Example
export default function MyComponent() {
const visNetworkRef = useRef<VisNetworkRef>(null);
// ...
return (
<>
<VisNetwork data={data} ref={visNetworkRef} />
<Button
title="Focus on node 1"
onPress={() => {
const nodeId = 1;
visNetworkRef.current?.focus(nodeId, { animation: true, scale: 5 });
}}
/>
</>
);
}
Options
You can use any of the vis-network options that are serializable as JSON (i.e. not functions or callbacks).
Example
export default function MyComponent() {
const [options, setOptions] = useState<Options>({
edges: {
color: 'blue',
width: 2,
},
interaction: {
dragNodes: false,
keyboard: false,
},
nodes: {
borderWidth: 4,
color: 'pink',
},
});
// ...
return <VisNetwork data={data} options={options} />;
}
Additional Options
In addition to the vis-network options mentioned in the Options section, the following props are also available.
zoomFitOnStabilized
- If
true
, the network is zoomed in or out to fill its container. - If
false
, nothing is done. As a result, nodes may be smaller than expected. - Default value:
true
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library