diff --git a/examples/react/functional-component-ts/package.json b/examples/react/functional-component-ts/package.json
index c9627edb..be742bb8 100644
--- a/examples/react/functional-component-ts/package.json
+++ b/examples/react/functional-component-ts/package.json
@@ -8,6 +8,7 @@
"@agile-ts/multieditor": "file:.yalc/@agile-ts/multieditor",
"@agile-ts/react": "file:.yalc/@agile-ts/react",
"@agile-ts/event": "file:.yalc/@agile-ts/event",
+ "@agile-ts/proxytree": "file:.yalc/@agile-ts/proxytree",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
diff --git a/examples/react/functional-component-ts/src/App.tsx b/examples/react/functional-component-ts/src/App.tsx
index c69e67cc..66e894a6 100644
--- a/examples/react/functional-component-ts/src/App.tsx
+++ b/examples/react/functional-component-ts/src/App.tsx
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import './App.css';
-import { useAgile, useWatcher } from '@agile-ts/react';
+import { useAgile, useWatcher, useProxy } from '@agile-ts/react';
import { useEvent } from '@agile-ts/event';
import {
COUNTUP,
@@ -10,8 +10,9 @@ import {
MY_STATE,
MY_STATE_2,
MY_STATE_3,
+ STATE_OBJECT,
} from './core';
-import { globalBind } from '@agile-ts/core';
+import { generateId, globalBind } from '@agile-ts/core';
let rerenderCount = 0;
let rerenderCountInCountupView = 0;
@@ -33,7 +34,7 @@ const App = (props: any) => {
] = useAgile([
MY_STATE,
MY_STATE_2,
- MY_COLLECTION.getItem('1'),
+ MY_COLLECTION.getItem('id1'),
MY_COLLECTION.getSelector('mySelector'),
MY_STATE_3,
undefined,
@@ -41,6 +42,15 @@ const App = (props: any) => {
]);
const [myGroup] = useAgile([MY_COLLECTION.getGroupWithReference('myGroup')]);
+ const [stateObject, item2, collection2] = useProxy([
+ STATE_OBJECT,
+ MY_COLLECTION.getItem('id2'),
+ MY_COLLECTION,
+ ]);
+
+ console.log('Item1: ', item2?.name);
+ console.log('Collection: ', collection2.slice(0, 2));
+
// const myCollection2 = useAgile(MY_COLLECTION);
const mySelector = useAgile(MY_COLLECTION.getSelector('mySelector'));
@@ -93,6 +103,25 @@ const App = (props: any) => {
{myComputed}
+
+
My State Object
+
+ Deep Name: {stateObject.friends.hans.name} {stateObject.location}
+
+
+
+
+
My Event