Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-photo-sphere-viewer

Package Overview
Dependencies
Maintainers
0
Versions
36
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-photo-sphere-viewer - npm Package Compare versions

Comparing version 5.0.2-psv5.7.1 to 6.0.0

3

dist/index.d.ts

@@ -5,3 +5,2 @@ import React from "react";

import "@photo-sphere-viewer/core/index.css";
import { LensflarePlugin } from "photo-sphere-viewer-lensflare-plugin";
type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

@@ -137,2 +136,2 @@ /**

declare const ReactPhotoSphereViewer: React.ForwardRefExoticComponent<Props & React.RefAttributes<ViewerAPI>>;
export { ReactPhotoSphereViewer, LensflarePlugin };
export { ReactPhotoSphereViewer };

7

dist/index.js

@@ -7,3 +7,2 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

import '@photo-sphere-viewer/core/index.css';
export { LensflarePlugin } from './node_modules/photo-sphere-viewer-lensflare-plugin/dist/index.module.js';
import EventEmitter from './node_modules/eventemitter3/index.js';

@@ -69,3 +68,3 @@ var eventEmitter = new EventEmitter();

// recreate options when individual props change
props.src, props.navbar, props.height, props.width, props.containerClass, props.hideNavbarButton || true, props.littlePlanet, props.fishEye, props.lang, props.onPositionChange, props.onZoomChange, props.onClick, props.onDblclick, props.onReady, props.moveSpeed, props.zoomSpeed, props.moveInertia, props.mousewheel, props.mousemove, props.mousewheelCtrlKey, props.touchmoveTwoFingers, props.panoData, props.requestHeaders, props.withCredentials, props.keyboard, props.plugins, props.sphereCorrection, props.minFov, props.maxFov, props.defaultZoomLvl, props.defaultYaw, props.defaultPitch]);
props.src, props.navbar, props.height, props.width, props.containerClass, props.hideNavbarButton || true, props.littlePlanet, props.fishEye, props.lang, props.onPositionChange, props.onZoomChange, props.onClick, props.onDblclick, props.onReady, props.moveSpeed, props.zoomSpeed, props.moveInertia, props.mousewheel, props.mousemove, props.mousewheelCtrlKey, props.touchmoveTwoFingers, props.panoData, props.requestHeaders, props.withCredentials, props.keyboard, props.plugins, props.adapter, props.sphereCorrection, props.minFov, props.maxFov, props.defaultZoomLvl, props.defaultYaw, props.defaultPitch, props.caption, props.description, props.downloadUrl, props.downloadName, props.loadingImg, props.loadingTxt, props.rendererParameters]);
var spherePlayerInstance = useRef(null);

@@ -275,4 +274,4 @@ var LITTLEPLANET_MAX_ZOOM = 130;

useEffect(function () {
if (spherePlayerInstance.current) {
spherePlayerInstance.current.setPanorama(options.src, options);
if (spherePlayerInstance.current && options.src) {
spherePlayerInstance.current.setPanorama(options.src, {});
}

@@ -279,0 +278,0 @@ }, [options.src]);

5

package.json
{
"name": "react-photo-sphere-viewer",
"version": "5.0.2-psv5.7.1",
"version": "6.0.0",
"description": "Photosphere Viewer for React.JS, wrapper of photo-sphere-viewer.js",

@@ -39,4 +39,3 @@ "author": "Elius94",

"autoprefixer": "^10.4.17",
"eventemitter3": "^5.0.1",
"photo-sphere-viewer-lensflare-plugin": "^2.1.2"
"eventemitter3": "^5.0.1"
},

@@ -43,0 +42,0 @@ "peerDependencies": {

642

README.md
# react-photo-sphere-viewer
> Photosphere Viewer for React.JS

@@ -6,3 +7,2 @@

```bash

@@ -16,4 +16,3 @@ npm install @photo-sphere-viewer/core react-photo-sphere-viewer

## Library Version
Original Wrapped Library: [PhotoSphereViewer](https://github.com/mistic100/Photo-Sphere-Viewer) Version: 5.7.1 [<font color="green">**NEW**</font>]
Now the component version is composed by the semantic version of the wrapper and the version of the original library. For example, the current version is 5.0.2-psv5.7.1. This means that the wrapper is in version 5.0.2 and the original library [psv](https://github.com/mistic100/Photo-Sphere-Viewer) is in version 5.7.1.
Original Wrapped Library: [PhotoSphereViewer](https://github.com/mistic100/Photo-Sphere-Viewer) used as Peer Dependency - Minimum Version: 5.7.1 [<font color="green">**NEW**</font>]

@@ -30,14 +29,17 @@ ## Description

Addictional features are:
- Little Planet Mode: display the panorama like a little planet (Similar to the DJI drones exported panoramas)
## Demo
[Enjoy it in this sandbox](https://codesandbox.io/s/sandbox-react-photo-sphere-viewer-by-elius94-j064sm?file=/src/App.js)
- Little Planet Mode: display the panorama like a little planet (Similar to the DJI drones exported panoramas)
## Demo
[Enjoy it in this sandbox](https://codesandbox.io/p/sandbox/react-photo-sphere-viewer-playground-zd8nt8)
## Usage
* Using React
### Using React
```jsx
import './App.css';
import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';
import React from 'react';
import "./App.css";
import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
import React from "react";

@@ -47,3 +49,7 @@ function App() {

<div className="App">
<ReactPhotoSphereViewer src="Test_Pano.jpg" height={'100vh'} width={"100%"}></ReactPhotoSphereViewer>
<ReactPhotoSphereViewer
src="Test_Pano.jpg"
height={"100vh"}
width={"100%"}
></ReactPhotoSphereViewer>
</div>

@@ -56,12 +62,119 @@ );

* Using Next.js
### Using Next.js
<details>
<summary>With App Router</summary>
```jsx
import './App.css';
import React, { useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';
// # app/page.js
// import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';
"use client"
import React from "react";
import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
// Import plugins
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
import { CompassPlugin } from '@photo-sphere-viewer/compass-plugin';
// Import plugins stylesheets
import '@photo-sphere-viewer/markers-plugin/index.css';
import '@photo-sphere-viewer/compass-plugin/index.css';
export default function Home() {
const imgSrc = 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg'
const plugins = [
[MarkersPlugin,
{
markers: [
{
id: "image",
position: { yaw: "0.33deg", pitch: "0.1deg" },
image: "vercel.svg",
anchor: "bottom center",
size: { width: 128, height: 128 },
tooltip: "Marker Tooltip Test",
},
],
},],
[CompassPlugin, {
hotspots: [
{ yaw: '0deg' },
{ yaw: '90deg' },
{ yaw: '180deg' },
{ yaw: '270deg' },
],
}]
]
return (
<div>
<ReactPhotoSphereViewer
src={imgSrc}
height={"100vh"}
width={"100%"}
plugins={plugins} ></ReactPhotoSphereViewer>
</div>
);
}
````
</details>
<br />
> [!IMPORTANT]
> To use `<ReactPhotoSphereViewer />` in Next.js with [Page Router](https://nextjs.org/docs/pages), you'll need to use some work-arounds in order to import correctly the CSS modules. Otherwise you will encounter the `CSS Modules cannot be imported from within node_modules` error. See more [here](https://nextjs.org/docs/messages/css-npm).
<details>
<summary>With Page Router</summary>
1. Install [`next-transpile-modules`](https://www.npmjs.com/package/next-transpile-modules)
```bash
$ npm install --save-dev next-transpile-modules
````
2. Update your `next.config.js` as shown below:
```js
// # next.config.js
const withTM = require("next-transpile-modules")([
// Add this 2 modules
"@photo-sphere-viewer/core",
"react-photo-sphere-viewer",
]);
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
module.exports = withTM(nextConfig);
```
3. Import the CSS manually into `_app.js`:
```js
// # pages/_app.js
import "@/styles/globals.css";
// Import plugins stylesheets
import "@photo-sphere-viewer/markers-plugin/index.css";
import "@photo-sphere-viewer/compass-plugin/index.css";
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
```
4. Import dynamicly `react-photo-sphere-viewer` and import the plugins manually:
```jsx
// # pages/index.js
import dynamic from "next/dynamic";
const ReactPhotoSphereViewer = dynamic(
() =>
import('react-photo-sphere-viewer').then(
import("react-photo-sphere-viewer").then(
(mod) => mod.ReactPhotoSphereViewer

@@ -74,6 +187,46 @@ ),

export default function Home() {
// Import plugins
import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin";
import { CompassPlugin } from "@photo-sphere-viewer/compass-plugin";
export default function Home() {
const imgSrc =
"https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg";
const plugins = [
[
MarkersPlugin,
{
markers: [
{
id: "image",
position: { yaw: "0.33deg", pitch: "0.1deg" },
image: "vercel.svg",
anchor: "bottom center",
size: { width: 128, height: 128 },
tooltip: "Marker Tooltip Test",
},
],
},
],
[
CompassPlugin,
{
hotspots: [
{ yaw: "0deg" },
{ yaw: "90deg" },
{ yaw: "180deg" },
{ yaw: "270deg" },
],
},
],
];
return (
<div className="App">
<ReactPhotoSphereViewer src="Test_Pano.jpg" height={'100vh'} width={"100%"}></ReactPhotoSphereViewer>
<div>
<ReactPhotoSphereViewer
src={imgSrc}
height={"100vh"}
width={"100%"}
plugins={plugins}
></ReactPhotoSphereViewer>
</div>

@@ -84,4 +237,3 @@ );

> [!IMPORTANT]
> To use `<ReactPhotoSphereViewer />` in Next.js with App Router, make sure to include [`"use client"`](https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs) in your component embedding the viewer. Refer to the [documentation](https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs) for more details.
</details>

@@ -93,3 +245,8 @@ ## Little planet mode

```jsx
<ReactPhotoSphereViewer src="Test_Pano.jpg" littlePlanet={true} height={'100vh'} width={"100%"}></ReactPhotoSphereViewer>
<ReactPhotoSphereViewer
src="Test_Pano.jpg"
littlePlanet={true}
height={"100vh"}
width={"100%"}
></ReactPhotoSphereViewer>
```

@@ -102,4 +259,7 @@

## Features
### options
#### Standard props
```ts

@@ -113,7 +273,9 @@ type standardProps = {

hideNavbarButton?: boolean; // Hide the navbar button.
}
};
```
#### Original props
Currently all options of the original library are supported and exported as props.
Currently all options of the original library are supported and exported as props.
```ts

@@ -125,147 +287,180 @@ /**

type ViewerConfig = {
container: HTMLElement | string;
panorama?: any;
/** @deprecated Use the `overlay` plugin instead */
overlay?: any;
/** @deprecated Use the `overlay` plugin instead */
overlayOpacity?: number;
/** @default equirectangular */
adapter?: AdapterConstructor | [AdapterConstructor, any];
plugins?: Array<PluginConstructor | [PluginConstructor, any]>;
/** @default null */
caption?: string;
/** @default null */
description?: string;
/** @default null */
downloadUrl?: string;
/** @default null */
downloadName?: string;
/** @default null */
loadingImg?: string;
/** @default 'Loading...' */
loadingTxt?: string;
/** @default `container` size */
size?: CssSize;
/** @default false */
fisheye?: boolean | number;
/** @default 30 */
minFov?: number;
/** @default 90 */
maxFov?: number;
/** @default 50 */
defaultZoomLvl?: number;
/** @default 0 */
defaultYaw?: number | string;
/** @default 0 */
defaultPitch?: number | string;
/** @default `0,0,0` */
sphereCorrection?: SphereCorrection;
/** @default 1 */
moveSpeed?: number;
/** @default 1 */
zoomSpeed?: number;
/** @default true */
moveInertia?: boolean;
/** @default true */
mousewheel?: boolean;
/** @default true */
mousemove?: boolean;
/** @default false */
mousewheelCtrlKey?: boolean;
/** @default false */
touchmoveTwoFingers?: boolean;
/** @deprecated configure `useXmpData` on EquirectangularAdapter */
useXmpData?: boolean;
panoData?: PanoData | PanoDataProvider;
requestHeaders?: Record<string, string> | ((url: string) => Record<string, string>);
/** @deprecated configure `backgroundColor` on EquirectangularAdapter */
canvasBackground?: string;
/** @default '{ alpha: true, antialias: true }' */
rendererParameters?: WebGLRendererParameters;
/** @default false */
withCredentials?: boolean;
/** @default 'zoom move download description caption fullscreen' */
navbar?: boolean | string | Array<string | NavbarCustomButton>;
lang?: {
zoom: string;
zoomOut: string;
zoomIn: string;
moveUp: string;
moveDown: string;
moveLeft: string;
moveRight: string;
download: string;
fullscreen: string;
menu: string;
close: string;
twoFingers: string;
ctrlZoom: string;
loadError: string;
littlePlanetButton: string;
littlePlanetIcon: string;
[K: string]: string;
};
keyboard?: boolean | 'always' | 'fullscreen' | Record<string, ACTIONS | ((viewer: Viewer) => void)>;
keyboardActions?: Record<string, ACTIONS | ((viewer: Viewer) => void)>;
container: HTMLElement | string;
panorama?: any;
/** @deprecated Use the `overlay` plugin instead */
overlay?: any;
/** @deprecated Use the `overlay` plugin instead */
overlayOpacity?: number;
/** @default equirectangular */
adapter?: AdapterConstructor | [AdapterConstructor, any];
plugins?: Array<PluginConstructor | [PluginConstructor, any]>;
/** @default null */
caption?: string;
/** @default null */
description?: string;
/** @default null */
downloadUrl?: string;
/** @default null */
downloadName?: string;
/** @default null */
loadingImg?: string;
/** @default 'Loading...' */
loadingTxt?: string;
/** @default `container` size */
size?: CssSize;
/** @default false */
fisheye?: boolean | number;
/** @default 30 */
minFov?: number;
/** @default 90 */
maxFov?: number;
/** @default 50 */
defaultZoomLvl?: number;
/** @default 0 */
defaultYaw?: number | string;
/** @default 0 */
defaultPitch?: number | string;
/** @default `0,0,0` */
sphereCorrection?: SphereCorrection;
/** @default 1 */
moveSpeed?: number;
/** @default 1 */
zoomSpeed?: number;
/** @default true */
moveInertia?: boolean;
/** @default true */
mousewheel?: boolean;
/** @default true */
mousemove?: boolean;
/** @default false */
mousewheelCtrlKey?: boolean;
/** @default false */
touchmoveTwoFingers?: boolean;
/** @deprecated configure `useXmpData` on EquirectangularAdapter */
useXmpData?: boolean;
panoData?: PanoData | PanoDataProvider;
requestHeaders?:
| Record<string, string>
| ((url: string) => Record<string, string>);
/** @deprecated configure `backgroundColor` on EquirectangularAdapter */
canvasBackground?: string;
/** @default '{ alpha: true, antialias: true }' */
rendererParameters?: WebGLRendererParameters;
/** @default false */
withCredentials?: boolean;
/** @default 'zoom move download description caption fullscreen' */
navbar?: boolean | string | Array<string | NavbarCustomButton>;
lang?: {
zoom: string;
zoomOut: string;
zoomIn: string;
moveUp: string;
moveDown: string;
moveLeft: string;
moveRight: string;
download: string;
fullscreen: string;
menu: string;
close: string;
twoFingers: string;
ctrlZoom: string;
loadError: string;
littlePlanetButton: string;
littlePlanetIcon: string;
[K: string]: string;
};
keyboard?:
| boolean
| "always"
| "fullscreen"
| Record<string, ACTIONS | ((viewer: Viewer) => void)>;
keyboardActions?: Record<string, ACTIONS | ((viewer: Viewer) => void)>;
};
```
> This code is generated from the original library. Click [here](http://photo-sphere-viewer.js.org/guide/config.html) to see documentation.
### Plugins
To use the standard plugins provided by the original library, you need to pass the `plugins` prop to the component. The prop is an array of plugins. Each plugin can be a constructor or an array of constructor and options. To include them in the component, you need to import them directly from the "@photo-sphere-viewer/" package.
> The only "third-party" plugin that is supported is the "Lensflare" plugin. To use it, you need to import it from the "react-photo-sphere-viewer" package, not from the original. That's because the plugin is made by me and it is not included in the original library.
> The only "third-party" plugin that is supported at the moment is the "Lensflare" plugin. To use it, you need to import it from the "photo-sphere-viewer-lensflare-plugin" package. This plugin is made by me and it is not included in the original library.
```jsx
import { ReactPhotoSphereViewer, LensflarePlugin } from 'react-photo-sphere-viewer';
import { CompassPlugin } from '@photo-sphere-viewer/compass-plugin';
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
import { LensflarePlugin } from "photo-sphere-viewer-lensflare-plugin";
import { CompassPlugin } from "@photo-sphere-viewer/compass-plugin";
import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin";
function App() {
const plugins = [
[LensflarePlugin, {
position: { pitch: 0, yaw: 0 },
src: 'lensflare.png',
width: 1000,
height: 1000,
}],
[CompassPlugin, {
hotspots: [
{ longitude: '0deg' },
{ longitude: '90deg' },
{ longitude: '180deg' },
{ longitude: '270deg' },
],
}],
[MarkersPlugin, {
markers: [
{
id: 'polygon',
polygonPx: [2941, 1413, 3042, 1402, 3222, 1419, 3433, 1463, 3480, 1505, 3438, 1538, 3241, 1543, 3041, 1555, 2854, 1559, 2739, 1516, 2775, 1469, 2941, 1413 ],
svgStyle : {
fill : 'rgba(255,0,0,0.2)',
stroke : 'rgba(255, 0, 50, 0.8)',
strokeWidth: '2px',
[
LensflarePlugin,
{
// list of lensflares
lensflares: [
{
id: "sun",
position: { yaw: "145deg", pitch: "2deg" },
type: 0,
},
data: { compass: 'rgba(255, 0, 50, 0.8)' },
},
{
id: 'polyline',
polylinePx: [2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301, 1519, 94, 1399, 34, 1356],
svgStyle: {
stroke : 'rgba(80, 150, 50, 0.8)',
strokeLinecap : 'round',
strokeLinejoin: 'round',
strokeWidth : '20px',
],
},
],
[
CompassPlugin,
{
hotspots: [
{ yaw: "0deg" },
{ yaw: "90deg" },
{ yaw: "180deg" },
{ yaw: "270deg" },
],
},
],
[
MarkersPlugin,
{
markers: [
{
id: "polygon",
polygonPx: [
2941, 1413, 3042, 1402, 3222, 1419, 3433, 1463, 3480, 1505, 3438,
1538, 3241, 1543, 3041, 1555, 2854, 1559, 2739, 1516, 2775, 1469,
2941, 1413,
],
svgStyle: {
fill: "rgba(255,0,0,0.2)",
stroke: "rgba(255, 0, 50, 0.8)",
strokeWidth: "2px",
},
data: { compass: "rgba(255, 0, 50, 0.8)" },
},
data: { compass: 'rgba(80, 150, 50, 0.8)' },
},
],
}],
]
{
id: "polyline",
polylinePx: [
2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301,
1519, 94, 1399, 34, 1356,
],
svgStyle: {
stroke: "rgba(80, 150, 50, 0.8)",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "20px",
},
data: { compass: "rgba(80, 150, 50, 0.8)" },
},
],
},
],
];
return (
<div className="App">
<ReactPhotoSphereViewer src="Test_pano.jpg" plugins={plugins} height={'100vh'} width={"100%"}></ReactPhotoSphereViewer>
<ReactPhotoSphereViewer
src="Test_pano.jpg"
plugins={plugins}
height={"100vh"}
width={"100%"}
></ReactPhotoSphereViewer>
</div>

@@ -283,4 +478,3 @@ );

const markersPlugs = instance.getPlugin(MarkersPlugin);
if (!markersPlugs)
return;
if (!markersPlugs) return;
markersPlugs.addMarker({

@@ -290,4 +484,4 @@ id: "imageLayer2",

size: { width: 220, height: 220 },
position: { yaw: '130.5deg', pitch: '-0.1deg' },
tooltip: "Image embedded in the scene"
position: { yaw: "130.5deg", pitch: "-0.1deg" },
tooltip: "Image embedded in the scene",
});

@@ -297,7 +491,13 @@ markersPlugs.addEventListener("select-marker", () => {

});
}
};
return (
<div className="App">
<ReactPhotoSphereViewer src="Test_pano.jpg" plugins={plugins} height={'100vh'} width={"100%"} onReady={handleReady}></ReactPhotoSphereViewer>
<ReactPhotoSphereViewer
src="Test_pano.jpg"
plugins={plugins}
height={"100vh"}
width={"100%"}
onReady={handleReady}
></ReactPhotoSphereViewer>
</div>

@@ -310,4 +510,5 @@ );

### Note for Virtual Tour Plugin
Please follow this Sandbox template to see how to use the original plugin: [Sandbox](https://codesandbox.io/s/react-photo-sphere-viewer-virtual-tour-example-xg8tp4)
Please follow this Sandbox template to see how to use the original plugin: [Sandbox](https://codesandbox.io/s/react-photo-sphere-viewer-virtual-tour-example-xg8tp4)
Please remember to set the 'src' prop of the ReactPhotoSphereViewer component to a placeholder image, it colud be for example the first picture of the virtual tour. [#36](https://github.com/Elius94/react-photo-sphere-viewer/issues/36)

@@ -320,4 +521,6 @@

```jsx
import { CubemapAdapter, CubemapAdapterOptions } from '@photo-sphere-viewer/cubemap-adapter';
import {
CubemapAdapter,
CubemapAdapterOptions,
} from "@photo-sphere-viewer/cubemap-adapter";
```

@@ -328,2 +531,3 @@

### events
All documented events are exported as props (function names).

@@ -334,19 +538,34 @@

onPositionChange?(lat: number, lng: number, instance: Viewer): any;
onZoomChange?(data: events.ZoomUpdatedEvent & { type: "zoom-updated"; }, instance: Viewer): any;
onClick?(data: events.ClickEvent & { type: "click"; }, instance: Viewer): void;
onDblclick?(data: events.ClickEvent & { type: "dblclick"; }, instance: Viewer): void;
onZoomChange?(
data: events.ZoomUpdatedEvent & { type: "zoom-updated" },
instance: Viewer
): any;
onClick?(data: events.ClickEvent & { type: "click" }, instance: Viewer): void;
onDblclick?(
data: events.ClickEvent & { type: "dblclick" },
instance: Viewer
): void;
onReady?(instance: Viewer): void;
}
};
```
You can declare an event callback:
```js
const handleClick = (data: events.ClickEvent & { type: "click"; }) => {
const handleClick = (data: events.ClickEvent & { type: "click" }) => {
console.log(data);
}
};
```
and then:
```jsx
{/*Pass the callback to the component*/}
<ReactPhotoSphereViewer ref={photoSphereRef} src="Test_Pano.jpg" onClick={handleClick}></ReactPhotoSphereViewer>
{
/*Pass the callback to the component*/
}
<ReactPhotoSphereViewer
ref={photoSphereRef}
src="Test_Pano.jpg"
onClick={handleClick}
></ReactPhotoSphereViewer>;
```

@@ -357,2 +576,3 @@

### methods
To trigger a method you need to pass a reference to the component and access the method directly.

@@ -380,48 +600,56 @@

```
And then:
```jsx
{/*Pass the ref to the component*/}
<ReactPhotoSphereViewer ref={photoSphereRef} src="Test_Pano.jpg"></ReactPhotoSphereViewer>
{
/*Pass the ref to the component*/
}
<ReactPhotoSphereViewer
ref={photoSphereRef}
src="Test_Pano.jpg"
></ReactPhotoSphereViewer>;
```
Currently managed methods are:
- animate(options: AnimateOptions): utils.Animation<any>;
- destroy(): void;
- createTooltip(config: TooltipConfig): Tooltip;
- needsContinuousUpdate(enabled: boolean): void;
- observeObjects(userDataKey: string): void;
- unobserveObjects(userDataKey: string): void;
- setCursor(cursor: string): void;
- stopAnimation(): PromiseLike<any>;
- rotate(position: ExtendedPosition): void;
- setOption(option: keyof UpdatableViewerConfig, value: unknown): void;
- setOptions(options: Partial<UpdatableViewerConfig>): void;
- getCurrentNavbar(): (string | object)[] | void;
- zoom(value: number): void;
- zoomIn(step: number): void;
- zoomOut(step: number): void;
- resize(size: CssSize): void;
- enterFullscreen(): void;
- exitFullscreen(): void;
- toggleFullscreen(): void;
- isFullscreenEnabled(): boolean | void;
- startAutoRotate(): void;
- stopAutoRotate(): void;
- getPlugin<T>(pluginId: string | PluginConstructor): T;
- getPosition(): Position; // Specify the return type
- getZoomLevel(): number; // Specify the return type
- getSize(): Size; // Specify the return type
- needsUpdate(): void;
- autoSize(): void;
- setPanorama(path: any, options?: PanoramaOptions): Promise<boolean>;
- toggleAutorotate(): void;
- showError(message: string): void;
- hideError(): void;
- startKeyboardControl(): void;
- stopKeyboardControl(): void;
- animate(options: AnimateOptions): utils.Animation<any>;
- destroy(): void;
- createTooltip(config: TooltipConfig): Tooltip;
- needsContinuousUpdate(enabled: boolean): void;
- observeObjects(userDataKey: string): void;
- unobserveObjects(userDataKey: string): void;
- setCursor(cursor: string): void;
- stopAnimation(): PromiseLike<any>;
- rotate(position: ExtendedPosition): void;
- setOption(option: keyof UpdatableViewerConfig, value: unknown): void;
- setOptions(options: Partial<UpdatableViewerConfig>): void;
- getCurrentNavbar(): (string | object)[] | void;
- zoom(value: number): void;
- zoomIn(step: number): void;
- zoomOut(step: number): void;
- resize(size: CssSize): void;
- enterFullscreen(): void;
- exitFullscreen(): void;
- toggleFullscreen(): void;
- isFullscreenEnabled(): boolean | void;
- startAutoRotate(): void;
- stopAutoRotate(): void;
- getPlugin<T>(pluginId: string | PluginConstructor): T;
- getPosition(): Position; // Specify the return type
- getZoomLevel(): number; // Specify the return type
- getSize(): Size; // Specify the return type
- needsUpdate(): void;
- autoSize(): void;
- setPanorama(path: any, options?: PanoramaOptions): Promise<boolean>;
- toggleAutorotate(): void;
- showError(message: string): void;
- hideError(): void;
- startKeyboardControl(): void;
- stopKeyboardControl(): void;
> To see the original methods, click [here](http://photo-sphere-viewer.js.org/guide/methods.html).
## License
MIT © [elius94](https://github.com/elius94)
dist/node_modules/photo-sphere-viewer-lensflare-plugin/dist/index.module.js
dist/node_modules/photo-sphere-viewer-lensflare-plugin/dist/index.module.js.map
dist/node_modules/three/build/three.module.js
dist/node_modules/three/build/three.module.js.map
dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc