esrieact 0.2.0 → 0.3.0

package/README.md

@@ -76,7 +76,7 @@ Instead, wrapper components are available to make map presentation clear and dec
 
 ```ts
 import React from "react";
-import { FeatureLayer, MapView } from "./esri";
+import { FeatureLayer, MapView } from "esrieact";
 
 export const ReactMap: React.FC = ({ layerList }) => {
   return (
@@ -119,7 +119,7 @@ Beacuse react-wrapped ESRI component props extend directly from ESRI class optio
 
 ```ts
 import React from "react";
-import { FeatureLayer, MapView } from "./esri";
+import { FeatureLayer, MapView } from "esrieact";
 
 export const ReactMap: React.FC = ({ layerList }) => {
   return (
@@ -142,7 +142,7 @@ However, any propery then updated within the above `new Extent` would not regist
 
 ```ts
 import React from "react";
-import { FeatureLayer, MapView } from "./esri";
+import { FeatureLayer, MapView } from "esrieact";
 import FeatureEffect from '@arcgis/core/layers/FeatureEffect'
 import FeatureFilter from '@arcgis/core/layers/FeatureFilter'
 
@@ -165,7 +165,7 @@ Because the property being updated is deeply nested within class-based ESRI comp
 
 ```ts
 import React from "react";
-import { FeatureLayer, MapView } from "./esri";
+import { FeatureLayer, MapView } from "esrieact";
 
 export const ReactMap: React.FC = ({ layerList }) => {
   const [clause, setClause] = useState("SOME SQL CLAUSE");
@@ -247,7 +247,7 @@ One of the most used layer types is the `FeatureLayer`. A `FeatureLayer` can be
 
 ```ts
 import React from "react";
-import { FeatureLayer, FeautureLayerView, MapView } from "./esri";
+import { FeatureLayer, FeautureLayerView, MapView } from "esrieact";
 
 export const ReactMap: React.FC = () => {
   const flRef = useRef<__esri.FeatureLayer>();

package/dist/core/renderers/createRendererComponent.d.ts

@@ -10,4 +10,12 @@ export type RendererProps<T extends __esri.RendererProperties = __esri.RendererP
  * any esri properties that extend esri.LayerProperties, and optional children
  */
 export type CreateRendererFunction<T extends RendererProps> = (properties: T) => __esri.Renderer;
+/**
+ * Factory function to create an esrieact renderer component
+ * @param createRenderer - Function that takes in renderer properties and returns an esri Renderer instance. Properties must be
+ * any esri properties that extend esri.RendererProperties, and optional children
+ * @param ref - Ref to the renderer instance
+ * @param properties - Renderer properties
+ * @returns A context provider whose context is the renderer instance to be passed to children, or if there are no children, returns null
+ */
 export declare const createRendererComponent: (createRenderer: CreateRendererFunction<RendererProps>, ref: Ref<__esri.Renderer>, { children, ...properties }: RendererProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/core/renderers/createRendererComponent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import { createContext, useContext, useEffect, useImperativeHandle, useMemo, useRef, } from "react";
 import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
 import SceneLayer from "@arcgis/core/layers/SceneLayer";
 import Sublayer from "@arcgis/core/layers/support/Sublayer";
@@ -15,11 +15,25 @@ import { useEsriPropertyUpdates } from "../../utils";
  * and makes available to its descendants
  */
 export const RendererContext = createContext({});
+/**
+ * Factory function to create an esrieact renderer component
+ * @param createRenderer - Function that takes in renderer properties and returns an esri Renderer instance. Properties must be
+ * any esri properties that extend esri.RendererProperties, and optional children
+ * @param ref - Ref to the renderer instance
+ * @param properties - Renderer properties
+ * @returns A context provider whose context is the renderer instance to be passed to children, or if there are no children, returns null
+ */
 export const createRendererComponent = (createRenderer, ref, { children, ...properties }) => {
     const parent = useContext(LayerContext);
-    const defaultRenderer = parent.renderer;
-    const instance = useMemo(() => {
-        const renderer = createRenderer(properties);
+    const defaultRenderer = useRef(parent.renderer?.clone());
+    // Just create the renderer instance (pure calculation)
+    const instance = useMemo(() => createRenderer(properties), []);
+    useImperativeHandle(ref, () => instance);
+    useEsriPropertyUpdates(instance, properties);
+    /**
+     * Assign the renderer on mount and clean up on unmount
+     */
+    useEffect(() => {
         if (parent instanceof FeatureLayer ||
             parent instanceof SceneLayer ||
             parent instanceof Sublayer ||
@@ -28,21 +42,12 @@ export const createRendererComponent = (createRenderer, ref, { children, ...prop
             parent instanceof OGCFeatureLayer ||
             parent instanceof StreamLayer ||
             parent instanceof WFSLayer) {
-            parent.renderer = renderer;
+            parent.renderer = instance;
         }
         else {
-            // Allow this because it only happens in development and is helpful for devs
-            // eslint-disable-next-line
+            // eslint-disable-next-line no-console
             console.error("You are trying to use a <Renderer /> component as the descendant of a component that does not take an ESRI renderer.");
         }
-        return renderer;
-    }, []);
-    useImperativeHandle(ref, () => instance);
-    useEsriPropertyUpdates(instance, properties);
-    /**
-     * Set the renderer of the parent layer back to its initial default on unmount
-     */
-    useEffect(() => {
         return () => {
             if (parent instanceof FeatureLayer ||
                 parent instanceof SceneLayer ||
@@ -52,10 +57,10 @@ export const createRendererComponent = (createRenderer, ref, { children, ...prop
                 parent instanceof OGCFeatureLayer ||
                 parent instanceof StreamLayer ||
                 parent instanceof WFSLayer) {
-                parent.renderer = defaultRenderer;
+                parent.renderer = defaultRenderer.current;
             }
         };
-    }, []);
+    }, [parent, instance, defaultRenderer]);
     // If no children, there is no need to render a context provider
     if (!children)
         return null;

package/dist/core/symbols/PictureMarkerSymbol.js

@@ -1,10 +1,6 @@
-import React, { useContext, useImperativeHandle, useMemo } from "react";
+import React from "react";
 import EsriPictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol.js";
-import Graphic from "@arcgis/core/Graphic";
-import Renderer from "@arcgis/core/renderers/Renderer";
-import { GraphicContext } from "../Graphic";
-import { useEsriPropertyUpdates } from "../../utils";
-import { RendererContext } from "../renderers";
+import { createSymbolComponent } from "./createSymbolComponent";
 /**
  * A PictureMarkerSymbol component, must be rendered as a child of a Renderer component or Graphic component
  *
@@ -12,32 +8,5 @@ import { RendererContext } from "../renderers";
  * - [PictureMarkerSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PictureMarkerSymbol.html)
  */
 export const PictureMarkerSymbol = React.forwardRef((properties, ref) => {
-    const parentGraphic = useContext(GraphicContext);
-    const parentRenderer = useContext(RendererContext);
-    /**
-     * Create instance only on first mount
-     */
-    const instance = useMemo(() => {
-        const symbol = new EsriPictureMarkerSymbol(properties);
-        if (!(parentGraphic instanceof Graphic) &&
-            !(parentRenderer instanceof Renderer)) {
-            // Allow this because it only happens in development and is helpful for devs
-            // eslint-disable-next-line
-            console.error("You are trying to render a PictureMarkerSymbol component that is not a descendant of a Graphic or Renderer.", "Did you forget to wrap your PictureMarkerSymbol in a Graphic or Renderer?");
-            return;
-        }
-        if (parentRenderer) {
-            // @ts-expect-error allow this for renderers that do take a symbol
-            parentRenderer.symbol = symbol;
-            return symbol;
-        }
-        if (parentGraphic) {
-            parentGraphic.symbol = symbol;
-            return symbol;
-        }
-        return symbol;
-    }, []);
-    useImperativeHandle(ref, () => instance);
-    useEsriPropertyUpdates(instance, properties);
-    return null;
+    return createSymbolComponent((props) => new EsriPictureMarkerSymbol(props), ref, properties, "PictureMarkerSymbol");
 });

package/dist/core/symbols/SimpleFillSymbol.js

@@ -1,9 +1,6 @@
-import React, { useContext, useImperativeHandle, useMemo } from "react";
+import React from "react";
 import EsriSimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol";
-import Graphic from "@arcgis/core/Graphic";
-import Renderer from "@arcgis/core/renderers/Renderer";
-import { GraphicContext } from "../Graphic";
-import { useEsriPropertyUpdates } from "../../utils";
+import { createSymbolComponent } from "./createSymbolComponent";
 /**
  * A SimpleFillSymbol component, must be rendered as a child of a Renderer component or Graphic component
  *
@@ -11,24 +8,5 @@ import { useEsriPropertyUpdates } from "../../utils";
  * - [SimpleFillSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html)
  */
 export const SimpleFillSymbol = React.forwardRef((properties, ref) => {
-    const parent = useContext(GraphicContext);
-    /**
-     * Create instance only on first mount
-     */
-    const instance = useMemo(() => {
-        const symbol = new EsriSimpleFillSymbol(properties);
-        if (!(parent instanceof Graphic) || !(parent instanceof Renderer)) {
-            // Allow this because it only happens in development and is helpful for devs
-            // eslint-disable-next-line
-            console.error("You are trying to render a SimpleFillSymbol component that is not a descendant of a Graphic or Renderer.", "Did you forget to wrap your SimpleFillSymbol in a Graphic or Renderer?");
-            return;
-        }
-        if (parent) {
-            parent.symbol = symbol;
-        }
-        return symbol;
-    }, []);
-    useImperativeHandle(ref, () => instance);
-    useEsriPropertyUpdates(instance, properties);
-    return null;
+    return createSymbolComponent((props) => new EsriSimpleFillSymbol(props), ref, properties, "SimpleFillSymbol");
 });

package/dist/core/symbols/createSymbolComponent.d.ts

@@ -0,0 +1,22 @@
+import React, { Ref } from "react";
+/**
+ * The react context object that any symbol component creates when rendered
+ * and makes available to its descendants
+ */
+export declare const SymbolContext: React.Context<__esri.Symbol>;
+export type SymbolProps<T extends __esri.SymbolProperties = __esri.SymbolProperties> = React.PropsWithChildren<T>;
+/**
+ * Function that takes in symbol properties and returns an esri Symbol instance. Properties must be
+ * any esri properties that extend esri.SymbolProperties, and optional children
+ */
+export type CreateSymbolFunction<T extends SymbolProps> = (properties: T) => __esri.Symbol;
+/**
+ * Factory function to create an esrieact symbol component
+ * @param createSymbol - Function that takes in symbol properties and returns an esri Symbol instance. Properties must be
+ * any esri properties that extend esri.SymbolProperties, and optional children
+ * @param ref - Ref to the symbol instance
+ * @param properties - Symbol properties
+ * @param componentName - Name of the component for error messages
+ * @returns A context provider whose context is the symbol instance to be passed to children, or if there are no children, returns null
+ */
+export declare const createSymbolComponent: (createSymbol: CreateSymbolFunction<SymbolProps>, ref: Ref<__esri.Symbol>, properties: SymbolProps, componentName: string) => import("react/jsx-runtime").JSX.Element | null;

package/dist/core/symbols/createSymbolComponent.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import Graphic from "@arcgis/core/Graphic";
+import Renderer from "@arcgis/core/renderers/Renderer";
+import { GraphicContext } from "../Graphic";
+import { useEsriPropertyUpdates } from "../../utils";
+import { RendererContext } from "../renderers";
+/**
+ * The react context object that any symbol component creates when rendered
+ * and makes available to its descendants
+ */
+export const SymbolContext = createContext({});
+/**
+ * Factory function to create an esrieact symbol component
+ * @param createSymbol - Function that takes in symbol properties and returns an esri Symbol instance. Properties must be
+ * any esri properties that extend esri.SymbolProperties, and optional children
+ * @param ref - Ref to the symbol instance
+ * @param properties - Symbol properties
+ * @param componentName - Name of the component for error messages
+ * @returns A context provider whose context is the symbol instance to be passed to children, or if there are no children, returns null
+ */
+export const createSymbolComponent = (createSymbol, ref, properties, componentName) => {
+    const parentGraphic = useContext(GraphicContext);
+    const parentRenderer = useContext(RendererContext);
+    // Just create the symbol instance (pure calculation)
+    const instance = useMemo(() => createSymbol(properties), []);
+    useImperativeHandle(ref, () => instance);
+    useEsriPropertyUpdates(instance, properties);
+    /**
+     * Assign the symbol on mount and clean up on unmount
+     */
+    useEffect(() => {
+        if (!(parentGraphic instanceof Graphic) &&
+            !(parentRenderer instanceof Renderer)) {
+            // Allow this because it only happens in development and is helpful for devs
+            // eslint-disable-next-line
+            console.error(`You are trying to render a ${componentName} component that is not a descendant of a Graphic or Renderer.`, `Did you forget to wrap your ${componentName} in a Graphic or Renderer?`);
+            return;
+        }
+        if (parentRenderer) {
+            // @ts-expect-error allow this for renderers that do take a symbol
+            parentRenderer.symbol = instance;
+        }
+        if (parentGraphic) {
+            // @ts-expect-error Allow generic __esri.Symbol to be assigned to various specific parent graphic symbol types
+            parentGraphic.symbol = instance;
+        }
+    }, [instance, parentGraphic, parentRenderer, componentName]);
+    // If no children, there is no need to render a context provider
+    if (!properties.children)
+        return null;
+    return (_jsx(SymbolContext.Provider, { value: instance, children: properties.children }));
+};

package/dist/core/symbols/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./PictureMarkerSymbol";
 export * from "./SimpleFillSymbol";
+export * from "./createSymbolComponent";

package/dist/core/symbols/index.js

@@ -1,2 +1,3 @@
 export * from "./PictureMarkerSymbol";
 export * from "./SimpleFillSymbol";
+export * from "./createSymbolComponent";

package/dist/layers/GeoJSONLayer.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import EsriGeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
+/**
+ * An event handler function map for events specific to a GeoJSONLayer
+ *
+ * From [ArcGIS JS API documentation](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html#events-summary)
+ */
+export type GeoJSONLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.GeoJSONLayerRefreshEventHandler;
+    edits: __esri.GeoJSONLayerEditsEventHandler;
+    "layerview-create": __esri.GeoJSONLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.GeoJSONLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.GeoJSONLayerLayerviewDestroyEventHandler;
+}>;
+/**
+ * A FeatureLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html)
+ */
+export declare const GeoJSONLayer: React.ForwardRefExoticComponent<__esri.GeoJSONLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: Partial<{
+        refresh: __esri.GeoJSONLayerRefreshEventHandler;
+        edits: __esri.GeoJSONLayerEditsEventHandler;
+        "layerview-create": __esri.GeoJSONLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.GeoJSONLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.GeoJSONLayerLayerviewDestroyEventHandler;
+    }> | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriGeoJSONLayer>>;

package/dist/layers/GeoJSONLayer.js

@@ -0,0 +1,16 @@
+import React from "react";
+import EsriGeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+/**
+ * Function that takes in properties of a GeoJSONLayer, and returns the GeoJSONLayer instance
+ */
+const createLayer = (properties) => {
+    return new EsriGeoJSONLayer(properties);
+};
+/**
+ * A FeatureLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html)
+ */
+export const GeoJSONLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/MapImageLayer.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import EsriMapImageLayer from "@arcgis/core/layers/MapImageLayer";
+export type MapImageLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.MapImageLayerRefreshEventHandler;
+    "layerview-create": __esri.MapImageLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.MapImageLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.MapImageLayerLayerviewDestroyEventHandler;
+}>;
 /**
  * A MapImageLayer component
  *
@@ -9,6 +15,11 @@ import EsriMapImageLayer from "@arcgis/core/layers/MapImageLayer";
 export declare const MapImageLayer: React.ForwardRefExoticComponent<__esri.MapImageLayerProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: Partial<{
+        refresh: __esri.MapImageLayerRefreshEventHandler;
+        "layerview-create": __esri.MapImageLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.MapImageLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.MapImageLayerLayerviewDestroyEventHandler;
+    }> | undefined;
     layerOrder?: number | undefined;
 } & React.RefAttributes<EsriMapImageLayer>>;

package/dist/layers/VectorTileLayer.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import EsriVectorTileLayer from "@arcgis/core/layers/VectorTileLayer";
+export type VectorTileLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.VectorTileLayerRefreshEventHandler;
+    "layerview-create": __esri.VectorTileLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.VectorTileLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.VectorTileLayerLayerviewDestroyEventHandler;
+}>;
 /**
  * A VectorTileLayer component
  *
@@ -9,6 +15,11 @@ import EsriVectorTileLayer from "@arcgis/core/layers/VectorTileLayer";
 export declare const VectorTileLayer: React.ForwardRefExoticComponent<__esri.VectorTileLayerProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: Partial<{
+        refresh: __esri.VectorTileLayerRefreshEventHandler;
+        "layerview-create": __esri.VectorTileLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.VectorTileLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.VectorTileLayerLayerviewDestroyEventHandler;
+    }> | undefined;
     layerOrder?: number | undefined;
 } & React.RefAttributes<EsriVectorTileLayer>>;

package/dist/layers/WMSLayer.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import EsriWMSLayer from "@arcgis/core/layers/WMSLayer";
+export type WMSLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.WMSLayerRefreshEventHandler;
+    "layerview-create": __esri.WMSLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.WMSLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.WMSLayerLayerviewDestroyEventHandler;
+}>;
 /**
  * A WMS Layer component
  *
@@ -9,6 +15,11 @@ import EsriWMSLayer from "@arcgis/core/layers/WMSLayer";
 export declare const WMSLayer: React.ForwardRefExoticComponent<__esri.WMSLayerProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: Partial<{
+        refresh: __esri.WMSLayerRefreshEventHandler;
+        "layerview-create": __esri.WMSLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.WMSLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.WMSLayerLayerviewDestroyEventHandler;
+    }> | undefined;
     layerOrder?: number | undefined;
 } & React.RefAttributes<EsriWMSLayer>>;

package/dist/layers/WebTileLayer.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import EsriWebTileLayer from "@arcgis/core/layers/WebTileLayer";
+export type WebTileLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.WebTileLayerRefreshEventHandler;
+    "layerview-create": __esri.WebTileLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.WebTileLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.WebTileLayerLayerviewDestroyEventHandler;
+}>;
 /**
  * An WebTileLayer component
  *
@@ -9,6 +15,11 @@ import EsriWebTileLayer from "@arcgis/core/layers/WebTileLayer";
 export declare const WebTileLayer: React.ForwardRefExoticComponent<__esri.WebTileLayerProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: Partial<{
+        refresh: __esri.WebTileLayerRefreshEventHandler;
+        "layerview-create": __esri.WebTileLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.WebTileLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.WebTileLayerLayerviewDestroyEventHandler;
+    }> | undefined;
     layerOrder?: number | undefined;
 } & React.RefAttributes<EsriWebTileLayer>>;

package/dist/layers/createLayerComponent.d.ts

@@ -8,9 +8,9 @@ export declare const LayerContext: React.Context<__esri.Layer | __esri.GroupLaye
  * Event handlers for all Layer components, some layer components may extend from this
  */
 export interface LayerEventHandlerFnMap {
-    "layerview-create": __esri.FeatureLayerLayerviewCreateEventHandler;
-    "layerview-create-error": __esri.FeatureLayerLayerviewCreateErrorEventHandler;
-    "layerview-destroy": __esri.FeatureLayerLayerviewDestroyEventHandler;
+    "layerview-create": __esri.LayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.LayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.LayerLayerviewDestroyEventHandler;
 }
 /**
  * Properties that can be applied to any ESRIEACT Layer component.  Extends from

package/dist/layers/createLayerComponent.js

@@ -21,18 +21,7 @@ export const createLayerComponent = (createLayer, ref, { children, events, layer
     /**
      * Create instance only on first mount
      */
-    const instance = useMemo(() => {
-        const layer = createLayer(properties);
-        // If the parent is a GroupLayer (or any EsriInstance that has the .add(layer) method), add it to that,
-        // otherwise, add directly to the map
-        if (parent && parent.add) {
-            parent.add(layer, layerOrder);
-        }
-        else {
-            map.add(layer, layerOrder);
-        }
-        return layer;
-    }, []);
+    const instance = useMemo(() => createLayer(properties), []);
     useImperativeHandle(ref, () => instance);
     useEsriPropertyUpdates(instance, properties);
     useEvents(instance, events);
@@ -43,6 +32,12 @@ export const createLayerComponent = (createLayer, ref, { children, events, layer
      * https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/fade-a-layer-on-off-smoothly/m-p/70174
      */
     useEffect(() => {
+        if (parent && parent.add) {
+            parent.add(instance, layerOrder);
+        }
+        else {
+            map.add(instance, layerOrder);
+        }
         return () => {
             if (parent && parent.remove) {
                 parent.remove(instance);
@@ -51,7 +46,7 @@ export const createLayerComponent = (createLayer, ref, { children, events, layer
                 map.remove(instance);
             }
         };
-    }, []);
+    }, [instance, parent, map, layerOrder]);
     // If no children, there is no need to render a context provider
     if (!children)
         return null;

package/dist/layers/index.d.ts

@@ -10,3 +10,4 @@ export * from "./WebTileLayer";
 export * from "./WMSLayer";
 export * from "./VectorTileLayer";
 export * from "./MapImageLayer";
+export * from "./GeoJSONLayer";

package/dist/layers/index.js

@@ -10,3 +10,4 @@ export * from "./WebTileLayer";
 export * from "./WMSLayer";
 export * from "./VectorTileLayer";
 export * from "./MapImageLayer";
+export * from "./GeoJSONLayer";

package/dist/widgets/createWidgetComponent.d.ts

@@ -4,7 +4,9 @@ import EsriWidget from "@arcgis/core/widgets/Widget";
  * Properties that can be applied to any ESRIEACT Widget component.  Extends from
  * esri's WidgetProperties to include child components and the widget position
  */
-export type WidgetComponentProps<T extends __esri.WidgetProperties = __esri.WidgetProperties, E extends Record<string, Function> = {}> = React.PropsWithChildren<T> & {
+export type WidgetComponentProps<T extends __esri.WidgetProperties = __esri.WidgetProperties & {
+    view?: __esri.MapView;
+}, E extends Record<string, Function> = {}> = React.PropsWithChildren<T> & {
     events?: E;
     position?: string | __esri.UIAddPosition;
 };
@@ -26,4 +28,4 @@ export declare const WidgetContext: React.Context<EsriWidget>;
  * @param properties The widget properties
  * @returns A context provider whose context is the instance to be passed to children, or if there are no children, returns null
  */
-export declare function createWidgetComponent<P extends WidgetComponentProps>(createWidget: CreateWidgetFunction, ref: Ref<EsriWidget>, { children, events, position, ...properties }: P): import("react/jsx-runtime").JSX.Element | null;
+export declare function createWidgetComponent<P extends WidgetComponentProps>(createWidget: CreateWidgetFunction, ref: Ref<EsriWidget>, { children, events, position, view, ...properties }: P): import("react/jsx-runtime").JSX.Element | null;

package/dist/widgets/createWidgetComponent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import React, { createContext, useContext, useEffect, useImperativeHandle, useMemo, useRef, } from "react";
 import Expand from "@arcgis/core/widgets/Expand";
 import { useMap } from "..";
 import { useEsriPropertyUpdates, useEvents } from "../utils";
@@ -16,9 +16,10 @@ export const WidgetContext = createContext({});
  * @param properties The widget properties
  * @returns A context provider whose context is the instance to be passed to children, or if there are no children, returns null
  */
-export function createWidgetComponent(createWidget, ref, { children, events, position, ...properties }) {
+export function createWidgetComponent(createWidget, ref, { children, events, position, view: viewFromProps, ...properties }) {
     const { view } = useMap();
     const parentWidgetContext = useContext(WidgetContext);
+    const childrenRef = useRef(null);
     const instance = useMemo(() => {
         const instance = createWidget({ ...properties, view });
         if (parentWidgetContext instanceof Expand) {
@@ -29,10 +30,23 @@ export function createWidgetComponent(createWidget, ref, { children, events, pos
             view.ui.add(instance, position);
         }
         return instance;
-    }, []);
+    }, [view]);
     useImperativeHandle(ref, () => instance);
     useEsriPropertyUpdates(instance, properties);
     useEvents(instance, events);
+    /**
+     * Check if children is a singular HTML element and assign its ref to instance.content,
+     * enables dev to make arbitrary UI elements children of an Expand widget
+     */
+    useEffect(() => {
+        if (children && childrenRef.current && instance) {
+            if (React.isValidElement(children)) {
+                if (instance instanceof Expand) {
+                    instance.content = childrenRef.current;
+                }
+            }
+        }
+    }, [children, instance]);
     /**
      * Remove widget on unmount
      */
@@ -43,5 +57,8 @@ export function createWidgetComponent(createWidget, ref, { children, events, pos
     }, []);
     if (!children)
         return null;
-    return (_jsx(WidgetContext.Provider, { value: instance, children: children }));
+    // Pass ref to the child element - works for both HTML elements and forwardRef components
+    return (_jsx(WidgetContext.Provider, { value: instance, children: React.cloneElement(children, {
+            ref: childrenRef,
+        }) }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "esrieact",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [