Description

A cross-compatible react native library for node graph visualizations.

Installation

npm i rn-graph

Example

Available Components

Graph

Description:
    The core component of this library.

Props:
    vertices! = {
        id!:        string | number     [unique identifier],
        style:      number              [idx of style preset. (default = 0)],
        ...
    }
    edges! = {
        from!:      string | number     [id of from vertex],
        to!:        string | number     [id of to vertex],
        directed!:  boolean             [0 = not directed, 1 = directed, 2 = bidirectional],
        style:      number              [idx of style preset (default = 0)],
        label:      string | number     [label displayed on edge],
        ...
    }
    settings = {
        static:     boolean             [true = non-moveable graph, false = moveable graph. (default = false)],
        fps:        number              [refreshes per second. only matters if static = false. (default = 480)]
    }
    styles = {
        frame:      object              [styled applied to outer frame/window of graph],
        vertexStylePresets: {           [array of vertex style objects]
            size:   number              [radius of vertex. currently only circular shapes are supported],
            ...
        }[],
        edgeStylePresets: {             [array of edge style objects]
            label:  object              [styles applied to label text. (default = { fontSize: 12, color: 'black', weight: 'normal' })],
            arrow: {
                size:   number          [size of the arrow. (default = 12)],
                color:  string          [color of the arrow. (default = 'black')],
                width:  number          [width of the arrow. (default = 2)],
                fill:   string          [fill of the arrow. (default = 'white')]
            },
            line: {
                color:  string          [color of the line. (default = 'black')],
                width:  number          [width of the line. (default = 2)]
            },
            ...
        }[],
    }
    VertexComponent! = (vert, preset_style_object) => React.JSX.element
                                        [define vertex rendering component.]

ExampleGraph

Description:
    An example of <Graph/> with predefined props.

Props:
    None.