# @neo4j-nvl/react

> React wrappers for the Neo4j Visualization Library

Latest version **2.0.0** (published 2026-09-15) · SEE LICENSE IN 'LICENSE.txt' license · 0 weekly downloads

## Install

```sh
npm install @neo4j-nvl/react
pnpm add @neo4j-nvl/react
yarn add @neo4j-nvl/react
bun add @neo4j-nvl/react
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-09-15 |
| First published | 2023-06-26 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN 'LICENSE.txt' |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 81.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | neo4j-bloom-reader2, neo4j-bloom-publisher, neo4j-organization |
| Keywords | neo4j, visualization, graph, react |

## Links

- npm: https://www.npmjs.com/package/@neo4j-nvl/react
- Homepage: https://neo4j.com/docs/nvl/current/
- Issues: https://community.neo4j.com/c/neo4j-graph-platform/neo4j-bloom
- npm.io page: https://npm.io/package/@neo4j-nvl/react

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) 4.18.1
- [@neo4j-nvl/base](https://npm.io/package/@neo4j-nvl/base.md) 2.0.0
- [@neo4j-nvl/interaction-handlers](https://npm.io/package/@neo4j-nvl/interaction-handlers.md) 2.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2026-09-15
- 1.2.0-5fa31537 (next) — 2026-09-10
- 1.0.0-0e1dd35b-alpha (test) — 2025-12-01
- 1.2.2 — 2026-09-11
- 1.2.0-69184852 — 2026-09-10
- 1.2.0-60f5032a — 2026-09-09
- 1.2.0-dbc13ec2 — 2026-08-31
- 1.2.0-685572c8 — 2026-08-26
- 1.2.0-939c3c83 — 2026-08-26
- 1.2.0-eea71f07 — 2026-08-26
- 1.2.0-50be3731 — 2026-08-25
- 1.2.0-7097fcd1 — 2026-08-25
- 1.2.0-3f080b04 — 2026-08-19
- 1.2.0-84e1e1ad — 2026-08-17
- 1.2.0-af7504c8 — 2026-08-17
- … 360 more at https://npm.io/package/@neo4j-nvl/react/versions

## README

# Neo4j Visualization Library

Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in [Neo4j Bloom](https://neo4j.com/product/bloom/). NVL is written in TypeScript and can be used in any JavaScript project. This package contains React components that make it easier to use NVL within a React application. If you want to use NVL with a framework other than React or want to build your own React wrapper, you can do so by using the [NVL base library](https://www.npmjs.com/package/@neo4j-nvl/base).

## Consuming the library

### Installing the library

You can install the NVL React wrappers with your preferred package manager, for example

```bash
npm install @neo4j-nvl/react
```

### Using the library

This is an example on how to use the BasicReactWrapper component:

```tsx
<BasicNvlWrapper nodes={nodes} rels={relationships} nvlOptions={options} nvlCallbacks={callbacks} />
```

When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:

```tsx
const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])

const addElements = () => {
  const newNodes = [...nodes, { id: nodes.length }]
  setNodes(newNodes)
}

;<div>
  <BasicNvlWrapper nodes={nodes} />
  <button onClick={addElements}>Add Graph Elements</button>
</div>
```

If you want to access the NVL class outside of the React wrapper you can use a reference of NVL to call its methods:

```tsx
const nvlRef = useRef<NVL>()

<div>
  <BasicNvlWrapper
    nodes={[{ id: '0' }, { id: '1' }]}
    rels={[{ from: '0', to: '1', id: '10' }]}
    ref={nvlRef}
  />
  <button onClick={() => nvlRef.current?.fit(['0', '1'])}>Zoom to Nodes</button>
</div>
```

To easily add common graph interaction, you can make use of the interaction handlers module and the InteractiveNvlWrapper.

The InteractiveNvlWrapper is a wrapper component that provides a basic set of interactions for the NVL. It is an extension of the BasicNvlWrapper component and incorporates the interaction handlers to provide a set of interaction events.

Events can be turned on and off by passing a callback function or a boolean value to the
`mouseEventCallbacks` prop. The callback function will be called with the event's arguments when the event is triggered. If a boolean value is passed, the event will be turned on or off accordingly.

```tsx
const [boxSelect, setBoxSelect] = useState(false)
<>
  <button onClick={() => setBoxSelect(!boxSelect)}>
    {boxSelect ? 'Disable' : 'Enable'} box select
  </button>
  <InteractiveNvlWrapper
    nodes={nodes}
    rels={relationships}
    mouseEventCallbacks={{
      onHover: (element, hitElements) => console.log(element, hitElements),
      onNodeClick: (node) => console.log(node),
      onBoxSelect: boxSelect
   }}
  />
</>
```

You can also find more instructions and examples on how to use the NVL React wrappers in the [docs](https://neo4j.com/docs/nvl/current/react-wrappers/).

### Product analytics

In order to improve the library we are collecting some information about the usage of NVL. If you prefer to disable this behavior setting `disableTelemetry` to `true` in the `nvlOptions` property.
For example:

```tsx
<BasicNvlWrapper
  nvlOptions={{ disableTelemetry: true }}
  nodes={[{ id: '0' }, { id: '1' }]}
  rels={[{ from: '0', to: '1', id: '10' }]}
/>
```

You can find more instructions and examples on how to use NVL interaction handlers in the [docs](https://neo4j.com/docs/nvl/current/react-wrappers/) and [API docs](https://neo4j.com/docs/api/nvl/current/modules/_neo4j_nvl_react.html), as well as in these [NVL code examples](https://neo4j.com/docs/api/nvl/current/examples.html?tab=react-vanilla).

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