# @codes-sources-de-la-justice/cytoscape-react

> Fork of with TypeScript support and simplified codebase with React Hooks.

Latest version **2.0.0** (published 2022-07-06) · 0 weekly downloads

## Install

```sh
npm install @codes-sources-de-la-justice/cytoscape-react
pnpm add @codes-sources-de-la-justice/cytoscape-react
yarn add @codes-sources-de-la-justice/cytoscape-react
bun add @codes-sources-de-la-justice/cytoscape-react
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2022-07-06 |
| First published | 2022-06-27 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 68.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | raitobezarius |

## Links

- npm: https://www.npmjs.com/package/@codes-sources-de-la-justice/cytoscape-react
- npm.io page: https://npm.io/package/@codes-sources-de-la-justice/cytoscape-react

## Recent versions

- 2.0.0 (latest) — 2022-07-06
- 1.0.0 — 2022-06-27
- 0.0.1 — 2022-06-27

## README

# cytoscape-react

Fork of <https://github.com/mwri/cytoscape-react> with TypeScript support and simplified codebase with React Hooks.

Make Cytoscape nodes into React Components!

## Dependencies

* cytoscape ^3.19.0
* react ^17.0.2
* react-dom ^17.0.2

## Usage instructions

**TODO: add example for layout support**

Three functional components are made available by `cytoscape-react`, an example would be something like this:

```js
import { GraphWrapper, NodeWrapper, EdgeWrapper } from 'cytoscape-react';

function MyGraphWrapper() {
  return (
    <GraphWrapper>
              <CyReact.NodeWrapper key="foo" id="foo">
                    <p>Test</p>
                </CyReact.NodeWrapper>
                <CyReact.NodeWrapper key="bar" id="bar">
                    <p>Test</p>
                </CyReact.NodeWrapper>
                <CyReact.NodeWrapper key="bazzz" id="bazzz">
                    <p>Test</p>
                </CyReact.NodeWrapper>
                <CyReact.EdgeWrapper key="foo_bar" id="foo_bar" source="foo" target="bar"/>
                <CyReact.EdgeWrapper key="bar_bazzz" id="bar_bazzz" source="bar" target="bazzz"/>
    </GraphWrapper>
  );
}
```

The children of any wrapper can be replaced by a component, e.g.

```js
function MagentaComponent({id}) { return (<div style={{textColor: "magenta"}}>magenta {id}</div>); }
```

Replacing the children of an edge wrapper is difficult though.

---
_Source: https://npm.io/package/@codes-sources-de-la-justice/cytoscape-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._