topographic-react 0.1.0 → 0.2.0

package/README.md

@@ -22,6 +22,8 @@ export function Hero() {
 }
 ```
 
+For the 3D terrain, add `mode="3d"`, and optionally `elevation`, `extent`, `detail` and `camera`.
+
 To put the background on your own element, use `useTopographicBackground(settings)`, which returns a ref.
 
 - [Project README](https://github.com/yahyabedirhan/topographic#readme)

package/dist/TopographicBackground.d.ts

@@ -9,6 +9,12 @@ export interface TopographicBackgroundSettingsProps {
     motion?: SettingsInput['motion'];
     layout?: SettingsInput['layout'];
     theme?: SettingsInput['theme'];
+    /** '2d' is the map. '3d' is the same map as a terrain. */
+    mode?: SettingsInput['mode'];
+    elevation?: number;
+    extent?: SettingsInput['extent'];
+    detail?: number;
+    camera?: SettingsInput['camera'];
 }
 export interface TopographicBackgroundRef<T extends HTMLElement = HTMLDivElement> extends MutableRefObject<T | null> {
     /** The live instance while mounted (for snapshot, or imperative updates). */

package/dist/TopographicBackground.js

@@ -24,12 +24,13 @@ function useTopographicBackground(settings = {}, options) {
       ref.topographic = null;
     };
   }, [ref, stableOptions]);
-  const { styleName, seed } = settings;
+  const { styleName, seed, mode, elevation, extent, detail } = settings;
   const lines = useByValue(settings.lines);
   const terrain = useByValue(settings.terrain);
   const motion = useByValue(settings.motion);
   const layout = useByValue(settings.layout);
   const theme = useByValue(settings.theme);
+  const camera = useByValue(settings.camera);
   useEffect(() => {
     if (styleName !== void 0) ref.topographic?.update({ style: styleName });
   }, [ref, styleName]);
@@ -51,10 +52,25 @@ function useTopographicBackground(settings = {}, options) {
   useEffect(() => {
     if (theme) ref.topographic?.update({ theme });
   }, [ref, theme]);
+  useEffect(() => {
+    if (mode !== void 0) ref.topographic?.update({ mode });
+  }, [ref, mode]);
+  useEffect(() => {
+    if (elevation !== void 0) ref.topographic?.update({ elevation });
+  }, [ref, elevation]);
+  useEffect(() => {
+    if (extent !== void 0) ref.topographic?.update({ extent });
+  }, [ref, extent]);
+  useEffect(() => {
+    if (detail !== void 0) ref.topographic?.update({ detail });
+  }, [ref, detail]);
+  useEffect(() => {
+    if (camera) ref.topographic?.update({ camera });
+  }, [ref, camera]);
   return ref;
 }
-const TopographicBackground = forwardRef(function TopographicBackground2({ styleName, seed, lines, terrain, motion, layout, theme, options, onReady, style, children, ...div }, forwarded) {
-  const ref = useTopographicBackground({ styleName, seed, lines, terrain, motion, layout, theme }, options);
+const TopographicBackground = forwardRef(function TopographicBackground2({ styleName, seed, lines, terrain, motion, layout, theme, mode, elevation, extent, detail, camera, options, onReady, style, children, ...div }, forwarded) {
+  const ref = useTopographicBackground({ styleName, seed, lines, terrain, motion, layout, theme, mode, elevation, extent, detail, camera }, options);
   const stableOptions = useByValue(options);
   const ready = useRef(onReady);
   ready.current = onReady;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "topographic-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React component and hook for topographic backgrounds.",
   "license": "MIT",
   "repository": {
@@ -39,7 +39,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "topographic": "^0.1.0"
+    "topographic": "^0.2.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19"