@foundation/graph

Foundation Graph

Add a force graph view to your react application. This module was built for use in the foundation suite but can be used in any react-based app.

Usage

Start by installing the package...

npm install @foundation/graph

Create a simple react component with your graph:

import React from 'react'
import { Graph, Nodes, Links } from '@foundation/graph'

const MyGraph = props => (
    <Graph
        nodes={[
            { id: 'foo' },
            { id: 'bar' },
            { id: 'baz' }
        ]}
        links={[
            { source: 'foo', target: 'bar' },
            { source: 'foo', target: 'baz' }
        ]}
    >
        <Links />
        <Nodes />
    </Graph>
)

We support a variety of other features like panning/zooming, dragging, and node selection. Documentation coming soon, see the /src directory for now.

Contributing

Contributions are more than welcome. We'd like to keep this package somewhat lightweight with a simple interface that allows consumers to wrap it. If you have an idea, feel free to open a ticket so we can discuss implementation options.