esrieact 0.1.0

package/dist/core/symbols/SimpleFillSymbol.js

@@ -0,0 +1,34 @@
+import React, { useContext, useImperativeHandle, useMemo } 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";
+/**
+ * A SimpleFillSymbol component, must be rendered as a child of a Renderer component or Graphic component
+ *
+ * ArcGIS JS API Source Components:
+ * - [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;
+});

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

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

package/dist/core/symbols/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./core";
+export * from "./layers";
+export * from "./map";
+export * from "./widgets";

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from "./core";
+export * from "./layers";
+export * from "./map";
+export * from "./widgets";

package/dist/layers/FeatureLayer.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import EsriFeatureLayer from "@arcgis/core/layers/FeatureLayer";
+export type FeatureLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.FeatureLayerRefreshEventHandler;
+    edits: __esri.FeatureLayerEditsEventHandler;
+    "layerview-create": __esri.FeatureLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.FeatureLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.FeatureLayerLayerviewDestroyEventHandler;
+}>;
+/**
+ * A FeatureLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [FeatureLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html)
+ */
+export declare const FeatureLayer: React.ForwardRefExoticComponent<__esri.FeatureLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: Partial<{
+        refresh: __esri.FeatureLayerRefreshEventHandler;
+        edits: __esri.FeatureLayerEditsEventHandler;
+        "layerview-create": __esri.FeatureLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.FeatureLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.FeatureLayerLayerviewDestroyEventHandler;
+    }> | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriFeatureLayer>>;

package/dist/layers/FeatureLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriFeatureLayer from "@arcgis/core/layers/FeatureLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+const createLayer = (properties) => {
+    return new EsriFeatureLayer(properties);
+};
+/**
+ * A FeatureLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [FeatureLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html)
+ */
+export const FeatureLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/GraphicsLayer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriGraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
+/**
+ * A GraphicsLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [GraphicsLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GraphicsLayer.html)
+ */
+export declare const GraphicsLayer: React.ForwardRefExoticComponent<__esri.GraphicsLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriGraphicsLayer>>;

package/dist/layers/GraphicsLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriGraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+const createLayer = (properties) => {
+    return new EsriGraphicsLayer(properties);
+};
+/**
+ * A GraphicsLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [GraphicsLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GraphicsLayer.html)
+ */
+export const GraphicsLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/GroupLayer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriGroupLayer from "@arcgis/core/layers/GroupLayer";
+/**
+ * A GroupLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [GroupLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GroupLayer.html)
+ */
+export declare const GroupLayer: React.ForwardRefExoticComponent<__esri.GroupLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriGroupLayer>>;

package/dist/layers/GroupLayer.js

@@ -0,0 +1,30 @@
+// /**
+//  * The react context object that any layer component creates when rendered
+//  * and makes available to its descendants
+//  */
+// export const GroupLayerContext = createContext({} as EsriGroupLayer);
+// type GroupLayerProps = __esri.GroupLayerProperties & React.PropsWithChildren;
+// export const GroupLayer = React.forwardRef<EsriGroupLayer, GroupLayerProps>(
+//   ({ children, ...properties }, ref) => {
+//     // If no children, there is no need to render a context provider
+//     if (!children) return null;
+//     return (
+//       <GroupLayerContext.Provider value={instance}>
+//         {children}
+//       </GroupLayerContext.Provider>
+//     );
+//   },
+// );
+import React from "react";
+import EsriGroupLayer from "@arcgis/core/layers/GroupLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+const createLayer = (properties) => {
+    return new EsriGroupLayer(properties);
+};
+/**
+ * A GroupLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [GroupLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GroupLayer.html)
+ */
+export const GroupLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/ImageryLayer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriImageryLayer from "@arcgis/core/layers/ImageryLayer";
+/**
+ * An ImageryLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [ImageryLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-ImageryLayer.html)
+ */
+export declare const ImageryLayer: React.ForwardRefExoticComponent<__esri.ImageryLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriImageryLayer>>;

package/dist/layers/ImageryLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriImageryLayer from "@arcgis/core/layers/ImageryLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+const createLayer = (properties) => {
+    return new EsriImageryLayer(properties);
+};
+/**
+ * An ImageryLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [ImageryLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-ImageryLayer.html)
+ */
+export const ImageryLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/ImageryTileLayer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer";
+/**
+ * An ImageryTileLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [ImageryTileLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-ImageryTileLayer.html)
+ */
+export declare const ImageryTileLayer: React.ForwardRefExoticComponent<__esri.ImageryTileLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriImageryTileLayer>>;

package/dist/layers/ImageryTileLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+const createLayer = (properties) => {
+    return new EsriImageryTileLayer(properties);
+};
+/**
+ * An ImageryTileLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [ImageryTileLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-ImageryTileLayer.html)
+ */
+export const ImageryTileLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/KMLLayer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriKMLLayer from "@arcgis/core/layers/KMLLayer";
+/**
+ * A KMLLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [KMLLayer](https://developers.arcgis.com/javascript/latest/sample-code/layers-kml/)
+ */
+export declare const KMLLayer: React.ForwardRefExoticComponent<__esri.KMLLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriKMLLayer>>;

package/dist/layers/KMLLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriKMLLayer from "@arcgis/core/layers/KMLLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+const createLayer = (properties) => {
+    return new EsriKMLLayer(properties);
+};
+/**
+ * A KMLLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [KMLLayer](https://developers.arcgis.com/javascript/latest/sample-code/layers-kml/)
+ */
+export const KMLLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/LayerView.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+/**
+ * Generic function to create a layer view component.  Can create a react-wrapped LayerView.  Any component
+ * created from this function must be used as a child of a Layer that has a layer view, i.e. `view.whenLayerView(layer)` can
+ * be called on that layer.  Can be casted to specify what kind of LayerView and LayerViewProps are being referred to by
+ * the parent layer component
+ *
+ * @example
+ * // defaults to basic esri LayerView, not very useful
+ * const LayerView = createLayerViewComponent();
+ *
+ * const SomeComponent = () => {
+ *    return (
+ *      <Layer>
+ *        <LayerView />
+ *      </Layer>
+ *    )
+ * }
+ *
+ * @example
+ * // More specific casting for a specific type of Layer, i.e. a FeatureLayer
+ * const FeatureLayerView = createLayerViewComponent<FeatureLayerViewProperties, FeatureLayerView>();
+ *
+ * const SomeComponent = () => {
+ *    return (
+ *      <FeatureLayer>
+ *        <FeatureLayerView
+ *          // Filter property of FeatureLayerView recognized
+ *          filter={{ where: 'SOME SQL CLAUSE' }}
+ *        />
+ *      </FeatureLayer>
+ *    )
+ * }
+ */
+export declare function createLayerViewComponent<P extends __esri.LayerViewProperties, R extends __esri.LayerView>(): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
+/**
+ * Generic LayerView component for the layerView of any generic Layer, can be child of
+ * any Layer that has a layerView
+ */
+export declare const LayerView: React.ForwardRefExoticComponent<__esri.LayerViewProperties & React.RefAttributes<__esri.LayerView>>;
+/**
+ * FeatureLayerView component, must be child of FeatureLayer component
+ */
+export declare const FeatureLayerView: React.ForwardRefExoticComponent<__esri.FeatureLayerViewProperties & React.RefAttributes<__esri.FeatureLayerView>>;
+/**
+ * KLMLayerView component, must be child of KLMLayer component
+ */
+export declare const KLMLayerView: React.ForwardRefExoticComponent<__esri.KMLLayerViewProperties & React.RefAttributes<__esri.KMLLayerView>>;
+/**
+ * CSVLayerView component, must be child of CSVLayer component
+ */
+export declare const CSVLayerView: React.ForwardRefExoticComponent<__esri.CSVLayerViewProperties & React.RefAttributes<__esri.CSVLayerView>>;

package/dist/layers/LayerView.js

@@ -0,0 +1,70 @@
+import { forwardRef, useContext, useEffect, useImperativeHandle, useState, } from "react";
+import { LayerContext } from "./createLayerComponent";
+import { useMap } from "..";
+import { useEsriPropertyUpdates } from "../utils";
+/**
+ * Generic function to create a layer view component.  Can create a react-wrapped LayerView.  Any component
+ * created from this function must be used as a child of a Layer that has a layer view, i.e. `view.whenLayerView(layer)` can
+ * be called on that layer.  Can be casted to specify what kind of LayerView and LayerViewProps are being referred to by
+ * the parent layer component
+ *
+ * @example
+ * // defaults to basic esri LayerView, not very useful
+ * const LayerView = createLayerViewComponent();
+ *
+ * const SomeComponent = () => {
+ *    return (
+ *      <Layer>
+ *        <LayerView />
+ *      </Layer>
+ *    )
+ * }
+ *
+ * @example
+ * // More specific casting for a specific type of Layer, i.e. a FeatureLayer
+ * const FeatureLayerView = createLayerViewComponent<FeatureLayerViewProperties, FeatureLayerView>();
+ *
+ * const SomeComponent = () => {
+ *    return (
+ *      <FeatureLayer>
+ *        <FeatureLayerView
+ *          // Filter property of FeatureLayerView recognized
+ *          filter={{ where: 'SOME SQL CLAUSE' }}
+ *        />
+ *      </FeatureLayer>
+ *    )
+ * }
+ */
+export function createLayerViewComponent() {
+    return forwardRef(function LayerViewCore(props, ref) {
+        const { view } = useMap();
+        const layer = useContext(LayerContext);
+        const [layerView, setLayerView] = useState();
+        useEffect(() => {
+            view.whenLayerView(layer).then((layerView) => {
+                setLayerView(layerView);
+                Object.keys(props).forEach((property) => (layerView[property] = props[property]));
+            });
+        }, []);
+        useEsriPropertyUpdates(layerView, props);
+        useImperativeHandle(ref, () => layerView);
+        return null;
+    });
+}
+/**
+ * Generic LayerView component for the layerView of any generic Layer, can be child of
+ * any Layer that has a layerView
+ */
+export const LayerView = createLayerViewComponent();
+/**
+ * FeatureLayerView component, must be child of FeatureLayer component
+ */
+export const FeatureLayerView = createLayerViewComponent();
+/**
+ * KLMLayerView component, must be child of KLMLayer component
+ */
+export const KLMLayerView = createLayerViewComponent();
+/**
+ * CSVLayerView component, must be child of CSVLayer component
+ */
+export const CSVLayerView = createLayerViewComponent();

package/dist/layers/VectorTileLayer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriVectorTileLayer from "@arcgis/core/layers/VectorTileLayer";
+/**
+ * A VectorTileLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [VectorTileLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-VectorTileLayer.html)
+ */
+export declare const VectorTileLayer: React.ForwardRefExoticComponent<__esri.VectorTileLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriVectorTileLayer>>;

package/dist/layers/VectorTileLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriVectorTileLayer from "@arcgis/core/layers/VectorTileLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+const createLayer = (properties) => {
+    return new EsriVectorTileLayer(properties);
+};
+/**
+ * A VectorTileLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [VectorTileLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-VectorTileLayer.html)
+ */
+export const VectorTileLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/WMSLayer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriWMSLayer from "@arcgis/core/layers/WMSLayer";
+/**
+ * A WMS Layer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [WMSLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WMSLayer.html)
+ */
+export declare const WMSLayer: React.ForwardRefExoticComponent<__esri.WMSLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriWMSLayer>>;

package/dist/layers/WMSLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriWMSLayer from "@arcgis/core/layers/WMSLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+const createLayer = (properties) => {
+    return new EsriWMSLayer(properties);
+};
+/**
+ * A WMS Layer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [WMSLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WMSLayer.html)
+ */
+export const WMSLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/WebTileLayer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import EsriWebTileLayer from "@arcgis/core/layers/WebTileLayer";
+/**
+ * An WebTileLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [WebTileLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WebTileLayer.html)
+ */
+export declare const WebTileLayer: React.ForwardRefExoticComponent<__esri.WebTileLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriWebTileLayer>>;

package/dist/layers/WebTileLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriWebTileLayer from "@arcgis/core/layers/WebTileLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+const createLayer = (properties) => {
+    return new EsriWebTileLayer(properties);
+};
+/**
+ * An WebTileLayer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [WebTileLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WebTileLayer.html)
+ */
+export const WebTileLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/createLayerComponent.d.ts

@@ -0,0 +1,36 @@
+import React, { Ref } from "react";
+/**
+ * The react context object that any layer component creates when rendered
+ * and makes available to its descendants
+ */
+export declare const LayerContext: React.Context<__esri.Layer | __esri.GroupLayer>;
+/**
+ * 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;
+}
+/**
+ * Properties that can be applied to any ESRIEACT Layer component.  Extends from
+ * esri's LayerProperties to include child components (i.e. in the case of GroupLayers)
+ */
+export type LayerComponentProps<T extends __esri.LayerProperties = __esri.LayerProperties, E extends Partial<LayerEventHandlerFnMap> = {}> = React.PropsWithChildren<T> & {
+    events?: E;
+    layerOrder?: number;
+};
+/**
+ * Function that takes in layer properties and returns an esri Layer instance. Properties must be
+ * any esri properties that extend esri.LayerProperties, and optional children
+ */
+export type CreateLayerFunction<T extends LayerComponentProps> = (properties: T) => __esri.Layer;
+/**
+ * Factory function to create an esrieact layer component
+ * @param createLayer Function that takes in the layer properties (which must extend from __esri.LayerProperties)
+ *  and returns the layer instance
+ * @param ref The react ref to be passed from the parent
+ * @param properties The layer 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 const createLayerComponent: (createLayer: CreateLayerFunction<LayerComponentProps>, ref: Ref<__esri.Layer>, { children, events, layerOrder, ...properties }: LayerComponentProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/layers/createLayerComponent.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import { useMap } from "../map/MapView";
+import { useEsriPropertyUpdates, useEvents } from "../utils";
+/**
+ * The react context object that any layer component creates when rendered
+ * and makes available to its descendants
+ */
+export const LayerContext = createContext({});
+/**
+ * Factory function to create an esrieact layer component
+ * @param createLayer Function that takes in the layer properties (which must extend from __esri.LayerProperties)
+ *  and returns the layer instance
+ * @param ref The react ref to be passed from the parent
+ * @param properties The layer properties
+ * @returns A context provider whose context is the instance to be passed to children, or if there are no children, returns null
+ */
+export const createLayerComponent = (createLayer, ref, { children, events, layerOrder, ...properties }) => {
+    const parent = useContext(LayerContext);
+    const { map } = useMap();
+    /**
+     * Create instance only on first mount
+     */
+    const instance = useMemo(() => {
+        const layer = createLayer(properties);
+        // If the parent in 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;
+    }, []);
+    useImperativeHandle(ref, () => instance);
+    useEsriPropertyUpdates(instance, properties);
+    useEvents(instance, events);
+    /**
+     * Remove layer on unmount
+     *
+     * TODO: Potentially fade layer out when unmounted, guide here:
+     * https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/fade-a-layer-on-off-smoothly/m-p/70174
+     */
+    useEffect(() => {
+        return () => {
+            map.remove(instance);
+        };
+    }, []);
+    // If no children, there is no need to render a context provider
+    if (!children)
+        return null;
+    return (_jsx(LayerContext.Provider, { value: instance, children: children }));
+};

package/dist/layers/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./createLayerComponent";
+export * from "./FeatureLayer";
+export * from "./GraphicsLayer";
+export * from "./GroupLayer";
+export * from "./ImageryLayer";
+export * from "./ImageryTileLayer";
+export * from "./KMLLayer";
+export * from "./LayerView";
+export * from "./WebTileLayer";
+export * from "./WMSLayer";
+export * from "./VectorTileLayer";

package/dist/layers/index.js

@@ -0,0 +1,11 @@
+export * from "./createLayerComponent";
+export * from "./FeatureLayer";
+export * from "./GraphicsLayer";
+export * from "./GroupLayer";
+export * from "./ImageryLayer";
+export * from "./ImageryTileLayer";
+export * from "./KMLLayer";
+export * from "./LayerView";
+export * from "./WebTileLayer";
+export * from "./WMSLayer";
+export * from "./VectorTileLayer";