# graph-viewer

> An interactive player/viewer of graphs (mind maps)

Latest version **1.4.1** (published 2018-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install graph-viewer
pnpm add graph-viewer
yarn add graph-viewer
bun add graph-viewer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.1 |
| Published | 2018-10-09 |
| First published | 2018-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 2 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | optimista |
| Maintainers | optimista |

## Links

- npm: https://www.npmjs.com/package/graph-viewer
- Repository: https://github.com/optimista/graph-viewer
- Homepage: https://github.com/optimista/graph-viewer#readme
- Issues: https://github.com/optimista/graph-viewer/issues
- npm.io page: https://npm.io/package/graph-viewer

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^3.1.0

## Recent versions

- 1.4.1 (latest) — 2018-10-09
- 1.4.0 — 2018-10-09
- 1.3.12 — 2018-10-07
- 1.3.11 — 2018-10-07
- 1.3.10 — 2018-10-07
- 1.3.9 — 2018-10-07
- 1.3.8 — 2018-10-07
- 1.3.7 — 2018-10-07
- 1.3.6 — 2018-10-07
- 1.3.5 — 2018-10-06
- 1.3.4 — 2018-10-06
- 1.3.3 — 2018-10-05
- 1.3.2 — 2018-10-04
- 1.3.1 — 2018-10-03
- 1.3.0 — 2018-10-03
- … 13 more at https://npm.io/package/graph-viewer/versions

## README

# graph-viewer

> An interactive player/viewer of graphs (mind maps)

![Alt Text](graph-viewer.gif)

[![NPM](https://img.shields.io/npm/v/graph-viewer.svg)](https://www.npmjs.com/package/graph-viewer) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save graph-viewer
```

```bash
yarn add graph-viewer
```


## Usage

```jsx
import React, { Component } from 'react'

import GraphViewer from 'graph-viewer'

export default class App extends Component {
  render () { 
    const graph = {
            align: { h: "left", v: "top" },
            edges: [[0, 1], [1, 2]],
            nodes: [
              { content: "Unveil", x: 30, y: 20 },
              { content: "the", x: 160, y: 45 },
              { content: "unseen", x: 50, y: 80 }
            ]
          };
    
    return <GraphViewer graph={graph} />    
  }
}
```

or

```
import React, { Component } from 'react'

import GraphViewer from 'graph-viewer'

export default class App extends Component {
  render () {
    const graph = {
            align: { h: "left", v: "top" },
            edges: [[0, 1], [1, 2]],
            nodes: [
              { content: "Unveil", x: 30, y: 20 },
              { content: "the", x: 160, y: 45 },
              { content: "unseen", x: 50, y: 80 }
            ]
          };
       
    return (
      <GraphViewer graph={graph}>
        {(viewer) => {
          const { frame, replay } = viewer;
          return (
            <Fragment>
              { frame === 0 && <p>Tap or scroll to reveal the graph!</p> }
              <button onClick={replay}>Replay</button>
            </Fragment>
          )
        }}
      </GraphViewer>
    )
  }
}
```

## License

MIT © [optimista](https://github.com/optimista)

---
_Source: https://npm.io/package/graph-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._