diff --git a/package-lock.json b/package-lock.json
index 06d9270..e0338a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18785,6 +18785,7 @@
       "version": "0.1.1-alpha.7",
       "resolved": "https://registry.npmjs.org/nextgraph/-/nextgraph-0.1.1-alpha.7.tgz",
       "integrity": "sha512-Dd0Fl18roKVxAHm0Z39k5Ylsgbqkev0JFOveUYnp5fLYwmECm2gUhO/Nb1P8m79V7D/jW6rHEU5edQA5sx0zFg==",
+      "dev": true,
       "license": "MIT/Apache-2.0"
     },
     "node_modules/node-addon-api": {
@@ -26459,7 +26460,6 @@
         "@solid-notifications/subscription": "^0.1.2",
         "cross-fetch": "^3.1.6",
         "http-link-header": "^1.1.1",
-        "nextgraph": "^0.1.1-alpha.7",
         "ws": "^8.18.0"
       },
       "devDependencies": {
@@ -26472,6 +26472,7 @@
         "cross-env": "^7.0.3",
         "dotenv": "^16.3.1",
         "jest-rdf": "^1.8.0",
+        "nextgraph": "^0.1.1-alpha.7",
         "start-server-and-test": "^2.0.11",
         "ts-node": "^10.9.1",
         "typed-emitter": "^2.1.0",
diff --git a/packages/connected-nextgraph/README.md b/packages/connected-nextgraph/README.md
index 0e6f5b4..7195422 100644
--- a/packages/connected-nextgraph/README.md
+++ b/packages/connected-nextgraph/README.md
@@ -7,7 +7,16 @@ The `@ldo/connected-nextgraph` library allows you to integrate [NextGraph](https
 First, install the required libraries:
 
 ```bash
-npm install nextgraph @ldo/connected-nextgraph
+npm install @ldo/connected-nextgraph
+```
+
+Also install a version of next-graph you wish to use
+
+```bash
+# For applications on NodeJS
+npm install nextgraph
+# For applications running in the web browser
+npm install nextgraphweb
 ```
 
 ## Usage:
@@ -26,7 +35,7 @@ const ldoDataset = createNextGraphLdoDataset();
 Before you can create or access resources, you need an active session:
 
 ```ts
-import ng from "nextgraph";
+import ng from "nextgraph" // or `import ng from "nextgraphweb"` for the browser
 
 // Open your nextgraph wallet
 const openedWallet = await ng.wallet_open_with_mnemonic_words(
@@ -45,9 +54,9 @@ const session = await ng.session_in_memory_start(
 ---
 
 ### 3. Link Your Dataset to the NextGraph Session
-
 ```ts
 ldoDataset.setContext("nextgraph", {
+  ng,
   sessionId: session.session_id
 });
 ```
@@ -114,6 +123,59 @@ await resource.update({
 });
 ```
 
+## Using NextGraph with React
+
+You can also use the `@ldo/react` library with `@ldo/connected-nextgraph`.
+
+### 1. Create the react methods
+
+First, we initialize some methods to use with the `@ldo/connected-nextgraph` and
+`@ldo/react` libraries.
+
+```typescript
+// ./reactMethods.ts
+import { nextGraphConnectedPlugin } from "@ldo/connected-nextgraph";
+import { createLdoReactMethods } from "@ldo/react";
+import ng from "nextgraphweb";
+
+export const {
+  dataset,
+  useLdo,
+  useMatchObject,
+  useMatchSubject,
+  useResource,
+  useSubject,
+  useSubscribeToResource,
+} = createLdoReactMethods([nextGraphConnectedPlugin]);
+
+// Set NG on the data. When the sessionId is retrieved, `setContext` can be
+// called at any time to set that as well.
+dataset.setContext("nextgraph", {
+  ng,
+  sessionId: "SOME_ID"
+});
+```
+
+### 2. Use the methods in your React components
+
+From there, you can import these created methods in your React component and use
+them as you would use any of the methods in the [@ldo/react-solid](https://ldo.js.org/latest/guides/solid_react/)
+library.
+
+```typescript
+import { FunctionComponent } from "react";
+import { PostShShapeType } from "./.ldo/post.shapeTypes";
+import { useResource, useSubject } from "./reactMethods";
+
+export const UseSubjectTest: FunctionComponent = () => {
+  useResource("did:ng:SOME_URI");
+  const post = useSubject(PostShShapeType, `SomeOtherUri`);
+
+  return <p role="article">{post.articleBody}</p>;
+};
+```
+
+
 ## Sponsorship
 This project was made possible by a grant from NGI Zero Entrust via nlnet. Learn more on the [NLnet project page](https://nlnet.nl/project/SolidUsableApps/).
 
diff --git a/packages/connected-nextgraph/package.json b/packages/connected-nextgraph/package.json
index 4d4b441..9ae6c73 100644
--- a/packages/connected-nextgraph/package.json
+++ b/packages/connected-nextgraph/package.json
@@ -34,6 +34,7 @@
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
     "jest-rdf": "^1.8.0",
+    "nextgraph": "^0.1.1-alpha.7",
     "start-server-and-test": "^2.0.11",
     "ts-node": "^10.9.1",
     "typed-emitter": "^2.1.0",
@@ -47,7 +48,6 @@
     "@solid-notifications/subscription": "^0.1.2",
     "cross-fetch": "^3.1.6",
     "http-link-header": "^1.1.1",
-    "nextgraph": "^0.1.1-alpha.7",
     "ws": "^8.18.0"
   },
   "files": [
@@ -57,4 +57,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/connected-nextgraph/src/NextGraphConnectedPlugin.ts b/packages/connected-nextgraph/src/NextGraphConnectedPlugin.ts
index e091b2c..1a3a33b 100644
--- a/packages/connected-nextgraph/src/NextGraphConnectedPlugin.ts
+++ b/packages/connected-nextgraph/src/NextGraphConnectedPlugin.ts
@@ -1,10 +1,12 @@
 import type { ConnectedContext, ConnectedPlugin } from "@ldo/connected";
 import type { NextGraphUri } from "./types";
 import { NextGraphResource } from "./resources/NextGraphResource";
-import ng from "nextgraph";
 import { isNextGraphUri } from "./util/isNextGraphUri";
 
 export interface NextGraphConnectedContext {
+  // NG does not have a type definition
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ng?: any;
   sessionId?: string;
   protectedStoreId?: string;
   privateStoreId?: string;
@@ -57,7 +59,7 @@ export const nextGraphConnectedPlugin: NextGraphConnectedPlugin = {
         ? context.nextgraph.privateStoreId
         : undefined);
 
-    const nuri: NextGraphUri = await ng.doc_create(
+    const nuri: NextGraphUri = await context.nextgraph.ng.doc_create(
       context.nextgraph.sessionId,
       "Graph",
       "data:graph",
diff --git a/packages/connected-nextgraph/src/notifications/NextGraphNotificationSubscription.ts b/packages/connected-nextgraph/src/notifications/NextGraphNotificationSubscription.ts
index 2a34e39..9d35e2c 100644
--- a/packages/connected-nextgraph/src/notifications/NextGraphNotificationSubscription.ts
+++ b/packages/connected-nextgraph/src/notifications/NextGraphNotificationSubscription.ts
@@ -1,7 +1,6 @@
 import { NotificationSubscription } from "@ldo/connected";
 import type { NextGraphConnectedPlugin } from "../NextGraphConnectedPlugin";
 import type { NextGraphNotificationMessage } from "./NextGraphNotificationMessage";
-import ng from "nextgraph";
 
 export class NextGraphNotificationSubscription extends NotificationSubscription<
   NextGraphConnectedPlugin,
@@ -11,7 +10,7 @@ export class NextGraphNotificationSubscription extends NotificationSubscription<
 
   protected async open(): Promise<void> {
     console.log("THIS WAS OPENED AND IT SHOULDNT BE");
-    this.unsub = await ng.doc_subscribe(
+    this.unsub = await this.context.nextgraph.ng.doc_subscribe(
       this.resource.uri,
       this.context.nextgraph.sessionId,
       this.onNotification.bind(this),
diff --git a/packages/connected-nextgraph/src/resources/NextGraphResource.ts b/packages/connected-nextgraph/src/resources/NextGraphResource.ts
index 9b33fcd..fc1cd10 100644
--- a/packages/connected-nextgraph/src/resources/NextGraphResource.ts
+++ b/packages/connected-nextgraph/src/resources/NextGraphResource.ts
@@ -13,7 +13,6 @@ import {
 import type { NextGraphUri } from "../types";
 import EventEmitter from "events";
 import type { NextGraphConnectedPlugin } from "../NextGraphConnectedPlugin";
-import ng from "nextgraph";
 import { changesToSparqlUpdate, type DatasetChanges } from "@ldo/rdf-utils";
 import type { NextGraphNotificationMessage } from "../notifications/NextGraphNotificationMessage";
 import type { Dataset, Quad } from "@rdfjs/types";
@@ -127,7 +126,7 @@ export class NextGraphResource
       await new Promise<void>(async (resolve, reject) => {
         let unsub: () => void;
         try {
-          unsub = await ng.doc_subscribe(
+          unsub = await this.context.nextgraph.ng.doc_subscribe(
             this.uri,
             this.context.nextgraph.sessionId,
             async (response: NextGraphNotificationMessage) => {
@@ -188,7 +187,7 @@ export class NextGraphResource
 
     try {
       // Perform Update with remote
-      await ng.sparql_update(
+      await this.context.nextgraph.ng.sparql_update(
         this.context.nextgraph.sessionId,
         await changesToSparqlUpdate(datasetChanges),
         this.uri,
diff --git a/packages/connected-nextgraph/test/integration.test.ts b/packages/connected-nextgraph/test/integration.test.ts
index 567ec5b..019eb75 100644
--- a/packages/connected-nextgraph/test/integration.test.ts
+++ b/packages/connected-nextgraph/test/integration.test.ts
@@ -52,6 +52,7 @@ describe("NextGraph Plugin", () => {
     // Get SessionId for that wallet
     nextgraphLdoDataset = createNextGraphLdoDataset();
     nextgraphLdoDataset.setContext("nextgraph", {
+      ng,
       sessionId,
       protectedStoreId,
       publicStoreId,