rdf-cytoscape

React component for rendering RDF graphs and datasets using n3.js and cytoscape.js

You can render either RDF Datasets or RDF Graphs. Datasets use react-panelgroup to split up the different graphs. Both elements take an N3Store as a required prop; for Graphs you just specify the graph name that you want to element to render.

import Graph from "rdf-cytoscape/lib/graph"
import Dataset from "rdf-cytoscape"

interface GraphProps {
    store: N3Store
    graph: string
    focus?: string
    context?: {}
    onSelect?(focus: string): void
    onUnselect?(focus: string): void
    onMouseOver?(focus: string): void
    onMouseOut?(focus: string): void
    onMount?(cy: cytoscape.Core): void
    onDestroy?(): void
}
 
interface DatasetProps {
    context: {}
    store: N3Store
    focus: string
    onFocus(focus: string): void
}

Either way you need to include rdf-cytoscape/rdf-cytoscape.css in your HTML somewhere, and you need to add the rdf-cytoscape CSS class to the immediate parent.