diff --git a/src-examples/App.jsx b/src-examples/App.jsx
index c6cc744..9c15645 100644
--- a/src-examples/App.jsx
+++ b/src-examples/App.jsx
@@ -5,12 +5,14 @@ import NavItem from "./NavItem";
import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDeclarativeExample";
import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
+import SimpleReduxHookExample from "./simpleReduxHooksExample/SimpleReduxHookExample";
const SideBar = () => (
Rich Grid with Declarative Markup
Simple Redux Dynamic Component Example
+ Simple Redux Dynamic Component Example
);
@@ -25,6 +27,7 @@ class App extends Component {
+
diff --git a/src-examples/simpleReduxHooksExample/GridComponent.jsx b/src-examples/simpleReduxHooksExample/GridComponent.jsx
new file mode 100644
index 0000000..4f924da
--- /dev/null
+++ b/src-examples/simpleReduxHooksExample/GridComponent.jsx
@@ -0,0 +1,32 @@
+import React, { useContext } from "react";
+import {Context} from "./store";
+import {AgGridReact} from "ag-grid-react";
+
+/*
+ * This component serves to display the row data (provided by redux)
+ */
+export default function GridComponent() {
+ const {store, dispatch} = useContext(Context);
+ const {columnDefs, rowData} = store;
+
+ const onGridReady = (params) => {
+ params.api.sizeColumnsToFit();
+ };
+
+ // row data will be provided via redux on this.props.rowData
+ return (
+
+ )
+}
diff --git a/src-examples/simpleReduxHooksExample/PriceRenderer.jsx b/src-examples/simpleReduxHooksExample/PriceRenderer.jsx
new file mode 100644
index 0000000..8e60e1c
--- /dev/null
+++ b/src-examples/simpleReduxHooksExample/PriceRenderer.jsx
@@ -0,0 +1,13 @@
+import React, {Component} from "react";
+
+export default class PriceRenderer extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+ {this.props.value}
+ );
+ }
+}
diff --git a/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx b/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx
new file mode 100644
index 0000000..45d157d
--- /dev/null
+++ b/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx
@@ -0,0 +1,18 @@
+import React, {useReducer} from "react";
+import GridComponent from "./GridComponent";
+
+import {Context, initialState, reducer} from "./store";
+
+export default function SimpleReduxHookExample() {
+ const [store, dispatch] = useReducer(reducer, initialState);
+
+ return (
+
+
+
Simple Example using Hooks (with useContext and useReducer)
+
+
+
+
+ )
+}
diff --git a/src-examples/simpleReduxHooksExample/gridDataActions.jsx b/src-examples/simpleReduxHooksExample/gridDataActions.jsx
new file mode 100644
index 0000000..c955838
--- /dev/null
+++ b/src-examples/simpleReduxHooksExample/gridDataActions.jsx
@@ -0,0 +1,14 @@
+export function updateRowData(rowData) {
+ return {
+ type: 'ROW_DATA_CHANGED',
+ rowData
+ }
+}
+
+export function setCurrency(currencySymbol, exchangeRate) {
+ return {
+ type: 'CURRENCY_CHANGED',
+ currencySymbol,
+ exchangeRate
+ }
+}
\ No newline at end of file
diff --git a/src-examples/simpleReduxHooksExample/store.js b/src-examples/simpleReduxHooksExample/store.js
new file mode 100644
index 0000000..da862a6
--- /dev/null
+++ b/src-examples/simpleReduxHooksExample/store.js
@@ -0,0 +1,75 @@
+import React from "react";
+import PriceRenderer from "./PriceRenderer";
+
+export const initialState = {
+ rowData: [],
+ columnDefs: [
+ {
+ field: 'symbol'
+ },
+ {
+ field: 'price',
+ cellClass: 'align-right',
+ cellRendererFramework: PriceRenderer
+ }
+ ]
+};
+
+export const reducer = (state = {rowData: []}, action) => {
+ switch (action.type) {
+ case 'SET_ROW_DATA':
+ return {
+ ...state,
+ rowData: createRowData()
+ };
+ default:
+ return state;
+ }
+};
+
+export const Context = React.createContext();
+
+
+// for test data
+// the following methods are for creating dummy row data
+const createRowData = () => {
+ let rowData = [];
+
+ for (let i = 0; i < 14; i++) {
+ let newItem = createItem(rowData);
+ rowData.push(newItem);
+ }
+
+ return rowData;
+};
+
+const createItem = (rowData) => {
+ return {
+ symbol: createUniqueRandomSymbol(rowData),
+ price: Math.floor(Math.random() * 100)
+ };
+};
+
+// creates a unique symbol, eg 'ADG' or 'ZJD'
+const createUniqueRandomSymbol = (rowData) => {
+ let symbol;
+ let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+ let isUnique = false;
+ while (!isUnique) {
+ symbol = '';
+ // create symbol
+ for (let i = 0; i < 3; i++) {
+ symbol += possible.charAt(Math.floor(Math.random() * possible.length));
+ }
+ // check uniqueness
+ isUnique = true;
+ rowData.forEach(function (oldItem) {
+ if (oldItem.symbol === symbol) {
+ isUnique = false;
+ }
+ });
+ }
+
+ return symbol;
+};