@weser/layers 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present Robin Weser
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# @weser/layers
+
+<img alt="npm version" src="https://badge.fury.io/js/@weser/layers.svg"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/@weser/layers.svg"> <a href="https://bundlephobia.com/result?p=@weser/layers@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@weser/layers.svg"></a>
+
+## Installation
+
+```sh
+# npm
+npm i --save @weser/layers
+# yarn
+yarn add @weser/layers
+# pnpm
+pnpm add @weser/layers
+```
+
+## Documentation
+
+## License
+
+@weser/layers is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
+Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
+Created with ♥ by [@robinweser](http://weser.io).

package/dist/LayerContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type T_Layer = {
+    id: string;
+    element: Object;
+};
+type LayerContext = {
+    layers: Array<T_Layer>;
+    addLayer: (layer: T_Layer) => void;
+    removeLayer: (id: T_Layer['id']) => void;
+    hasLayer: (id: T_Layer['id']) => boolean;
+};
+declare const _default: import("react").Context<LayerContext | null>;
+export default _default;

package/dist/LayerContext.js

@@ -0,0 +1,3 @@
+'use client';
+import { createContext } from 'react';
+export default createContext(null);

package/dist/LayerContextProvider.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { T_Layer } from './LayerContext.js';
+type Props = {
+    onLayerAdded?: (layers: Array<T_Layer>) => void;
+    onLayerRemoved?: (layers: Array<T_Layer>) => void;
+};
+export default function LayerContextProvider({ children, onLayerAdded, onLayerRemoved, }: PropsWithChildren<Props>): import("react").JSX.Element;
+export {};

package/dist/LayerContextProvider.jsx

@@ -0,0 +1,36 @@
+'use client';
+import { useState } from 'react';
+import LayerContext from './LayerContext.js';
+export default function LayerContextProvider({ children, onLayerAdded, onLayerRemoved, }) {
+    const [layers, setLayers] = useState([]);
+    function addLayer(layer) {
+        setLayers((prevLayers) => {
+            const filteredLayers = prevLayers.filter((item) => item.id !== layer.id);
+            const newLayers = [...filteredLayers, layer];
+            if (onLayerAdded) {
+                onLayerAdded(newLayers);
+            }
+            return newLayers;
+        });
+    }
+    function removeLayer(id) {
+        setLayers((prevLayers) => {
+            const newLayers = prevLayers.filter((item) => item.id !== id);
+            if (onLayerRemoved) {
+                onLayerRemoved(newLayers);
+            }
+            return newLayers;
+        });
+    }
+    function hasLayer(id) {
+        return layers.find((item) => item.id === id) !== undefined;
+    }
+    return (<LayerContext.Provider value={{
+            addLayer,
+            removeLayer,
+            hasLayer,
+            layers,
+        }}>
+      {children}
+    </LayerContext.Provider>);
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as LayerContext, T_Layer } from './LayerContext.js';
+export { default as LayerContextProvider } from './LayerContextProvider.jsx';
+export { default as useLayerContext } from './useLayerContext.js';
+export { default as useLayer } from './useLayer.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { default as LayerContext } from './LayerContext.js';
+export { default as LayerContextProvider } from './LayerContextProvider.jsx';
+export { default as useLayerContext } from './useLayerContext.js';
+export { default as useLayer } from './useLayer.js';

package/dist/useClientOnly.d.ts

@@ -0,0 +1 @@
+export default function useClientSide(): boolean;

package/dist/useClientOnly.js

@@ -0,0 +1,6 @@
+import { useEffect, useState } from 'react';
+export default function useClientSide() {
+    const [isClientSide, setClientSide] = useState(false);
+    useEffect(() => setClientSide(true), []);
+    return isClientSide;
+}

package/dist/useLayer.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export default function useLayer<E extends HTMLElement>(visible: boolean): [RefObject<E>, boolean];

package/dist/useLayer.js

@@ -0,0 +1,20 @@
+'use client';
+import { useEffect, useId, useRef } from 'react';
+import useLayerContext from './useLayerContext.js';
+export default function useLayer(visible) {
+    const id = useId();
+    const ref = useRef(null);
+    const { layers, addLayer, removeLayer, hasLayer } = useLayerContext();
+    useEffect(() => {
+        if (visible) {
+            addLayer({ id, element: ref });
+        }
+        else {
+            if (hasLayer(id)) {
+                removeLayer(id);
+            }
+        }
+    }, [visible]);
+    const active = layers[layers.length - 1]?.id === id;
+    return [ref, active];
+}

package/dist/useLayerContext.d.ts

@@ -0,0 +1,6 @@
+export default function useLayerContext(): {
+    layers: import("./LayerContext.js").T_Layer[];
+    addLayer: (layer: import("./LayerContext.js").T_Layer) => void;
+    removeLayer: (id: string) => void;
+    hasLayer: (id: string) => boolean;
+};

package/dist/useLayerContext.js

@@ -0,0 +1,10 @@
+'use client';
+import { useContext } from 'react';
+import LayerContext from './LayerContext.js';
+export default function useLayerContext() {
+    const context = useContext(LayerContext);
+    if (!context) {
+        throw new Error("You're using layer context outside of its provider.");
+    }
+    return context;
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@weser/layers",
+  "version": "0.0.1",
+  "description": "React library for working with multiple layers",
+  "author": "Robin Weser <robin@weser.io>",
+  "license": "MIT",
+  "homepage": "https://github.com/robinweser/weser.git",
+  "repository": "https://github.com/robinweser/weser.git",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist/**"
+  ],
+  "browserslist": [
+    "IE >= 11",
+    "Firefox >= 60",
+    "Safari >= 11.1",
+    "Chrome >= 66",
+    "ChromeAndroid >= 66",
+    "iOS >= 11.3",
+    "Edge >= 15"
+  ],
+  "scripts": {
+    "setup": "pnpm build",
+    "clean": "rimraf dist",
+    "build": "tsc -b",
+    "dev": "pnpm build -w",
+    "test": "echo 1"
+  },
+  "keywords": [
+    "react",
+    "react-hook",
+    "react hooks",
+    "hooks",
+    "utils",
+    "layers",
+    "ui layers"
+  ],
+  "peerDependencies": {
+    "react": ">16.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "ava": "^6.1.3",
+    "react": "canary",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.4.5"
+  },
+  "gitHead": "f8cd929768ab80c7c441f66770df2a95c33318a7"
+}