diff --git a/examples/redux-react-app/package.json b/examples/redux-react-app/package.json
index df6ee38cb..9aa21cc47 100644
--- a/examples/redux-react-app/package.json
+++ b/examples/redux-react-app/package.json
@@ -15,9 +15,9 @@
"@fortawesome/react-fontawesome": "^0.1.9",
"@material-ui/core": "^4.9.14",
"@material-ui/icons": "^4.11.2",
- "@metacell/geppetto-meta-client": "^1.1.0",
- "@metacell/geppetto-meta-core": "^1.1.0",
- "@metacell/geppetto-meta-ui": "^1.1.0",
+ "@metacell/geppetto-meta-client": "file:.yalc/@metacell/geppetto-meta-client",
+ "@metacell/geppetto-meta-core": "file:.yalc/@metacell/geppetto-meta-core",
+ "@metacell/geppetto-meta-ui": "file:.yalc/@metacell/geppetto-meta-ui",
"@nosferatu500/react-sortable-tree": "3.0.5",
"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
"@reduxjs/toolkit": "^1.5.1",
diff --git a/examples/redux-react-app/src/app/icons.js b/examples/redux-react-app/src/app/icons.js
new file mode 100644
index 000000000..79e1dd0b4
--- /dev/null
+++ b/examples/redux-react-app/src/app/icons.js
@@ -0,0 +1,17 @@
+export const CloseIcon = (props) => (
+
+);
\ No newline at end of file
diff --git a/examples/redux-react-app/src/app/showcase.js b/examples/redux-react-app/src/app/showcase.js
index b8e016257..23bebbd85 100644
--- a/examples/redux-react-app/src/app/showcase.js
+++ b/examples/redux-react-app/src/app/showcase.js
@@ -3,6 +3,8 @@ import { getLayoutManagerInstance } from "@metacell/geppetto-meta-client/common/
import CircularProgress from '@material-ui/core/CircularProgress';
import { useStore } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
+import { Button } from '@material-ui/core';
+import { CloseIcon } from './icons';
const useStyles = makeStyles({
layoutContainer: {
@@ -24,24 +26,69 @@ const MainLayout = () => {
const store = useStore();
const [Component, setComponent] = useState(undefined);
- useEffect(() => {
- // Workaround because getLayoutManagerInstance
- // is undefined when calling it in global scope
- // Need to wait until store is ready ...
- // TODO: find better way to retrieve the LayoutManager component!
- if (Component === undefined) {
- const myManager = getLayoutManagerInstance();
- if (myManager) {
- setComponent(myManager.getComponent());
- }
- }
- }, [store])
+ useEffect(() => {
+ // Workaround because getLayoutManagerInstance
+ // is undefined when calling it in global scope
+ // Need to wait until store is ready ...
+ // TODO: find better way to retrieve the LayoutManager component!
+ if (Component === undefined) {
+ const myManager = getLayoutManagerInstance();
+ if (myManager) {
+ setComponent(
+ myManager.getComponent(
+ {
+ icons: {
+ close: