AG-2914 DOCS - Add docs around react hooks with editors.

src-examples/simpleReduxHooksExample/GridComponent.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, {useContext} from "react";
 import {Context} from "./store";
 import {AgGridReact} from "ag-grid-react";
 
@@ -22,7 +22,7 @@ export default function GridComponent() {
                 columnDefs={columnDefs}
                 rowData={rowData}
 
-                reactNext={true}
+                reactNext
 
                 // events
                 onGridReady={onGridReady}>

src-examples/simpleReduxHooksExample/PriceEditor.jsx

@@ -0,0 +1,18 @@
+import React, {useEffect, forwardRef, useImperativeHandle, useRef} from "react";
+
+export default forwardRef((props, ref) => {
+    const inputRef = useRef();
+    useImperativeHandle(ref, () => {
+        return {
+            getValue: () => {
+                return inputRef.current.value;
+            }
+        };
+    });
+
+    useEffect(() => {
+        // https://github.com/facebook/react/issues/7835#issuecomment-395504863
+        setTimeout(() => inputRef.current.focus(), 10)
+    }, []);
+    return <input type="text" ref={inputRef} defaultValue={props.value}/>;
+})

src-examples/simpleReduxHooksExample/store.js

@@ -1,15 +1,19 @@
 import React from "react";
 import PriceRenderer from "./PriceRenderer";
+import PriceEditor from "./PriceEditor";
 
 export const initialState = {
     rowData: [],
     columnDefs: [
         {
-            field: 'symbol'
+            field: 'symbol',
+            editable: true
         },
         {
             field: 'price',
             cellClass: 'align-right',
+            editable: true,
+            cellEditorFramework: PriceEditor,
             cellRendererFramework: PriceRenderer
         }
     ]