{"id":19810343,"url":"https://github.com/elius94/react-photo-sphere-viewer","last_synced_at":"2025-05-16T14:08:06.283Z","repository":{"id":49323531,"uuid":"516436167","full_name":"Elius94/react-photo-sphere-viewer","owner":"Elius94","description":"Photosphere Viewer for React.JS","archived":false,"fork":false,"pushed_at":"2025-04-24T12:36:40.000Z","size":27342,"stargazers_count":96,"open_issues_count":2,"forks_count":23,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-12T23:32:29.412Z","etag":null,"topics":["360-photo","360-video","360-viewer","image","photo-sphere-viewer","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Elius94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-21T16:01:06.000Z","updated_at":"2025-04-28T06:30:03.000Z","dependencies_parsed_at":"2022-09-23T15:01:45.756Z","dependency_job_id":"2d37197e-79ff-436e-9091-87972fd2ecfa","html_url":"https://github.com/Elius94/react-photo-sphere-viewer","commit_stats":{"total_commits":48,"total_committers":5,"mean_commits":9.6,"dds":"0.14583333333333337","last_synced_commit":"c24d49185911d568da102184b30a962b501bad39"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elius94%2Freact-photo-sphere-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elius94%2Freact-photo-sphere-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elius94%2Freact-photo-sphere-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elius94%2Freact-photo-sphere-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Elius94","download_url":"https://codeload.github.com/Elius94/react-photo-sphere-viewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254544146,"owners_count":22088807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["360-photo","360-video","360-viewer","image","photo-sphere-viewer","react","reactjs"],"created_at":"2024-11-12T09:20:55.338Z","updated_at":"2025-05-16T14:08:01.257Z","avatar_url":"https://github.com/Elius94.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-photo-sphere-viewer\n\n\u003e Photosphere Viewer for React.JS\n\n![Screenshot](https://user-images.githubusercontent.com/14907987/194562000-0411b51e-f017-468a-a51c-c6ce6df9b629.png)\n\n```bash\nnpm install @photo-sphere-viewer/core react-photo-sphere-viewer\n```\n\n\u003e [!IMPORTANT]\n\u003e Since [v5.0.0-psv5.7.1](https://github.com/Elius94/react-photo-sphere-viewer/releases/tag/v5.0.0-psv5.7.1), to use `\u003cReactPhotoSphereViewer /\u003e` you have to manually install the JS library `@photo-sphere-viewer/core`. This is a breaking change. The library is not included in the package anymore. You can install it using the command `npm install @photo-sphere-viewer/core` or `yarn add @photo-sphere-viewer/core`. I decided to remove the library from the package to reduce the size of the package and to avoid the need to update the package every time the original library is updated. In particular, from now on, to use a plugin or an adapter, you need to import it directly from the package. For example, to use the `MarkersPlugin` you need to import it from the package `import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin'`.\n\n## Library Version\nOriginal Wrapped Library: [PhotoSphereViewer](https://github.com/mistic100/Photo-Sphere-Viewer) used as Peer Dependency - Minimum Version: 5.7.1 [\u003cfont color=\"green\"\u003e**NEW**\u003c/font\u003e]\n\n## Description\n\n[![NPM](https://img.shields.io/npm/v/react-photo-sphere-viewer.svg)](https://www.npmjs.com/package/react-photo-sphere-viewer) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n[](https://user-images.githubusercontent.com/14907987/180258193-7d6179dc-64d7-4b08-9381-95e061c9ff79.mp4)\n\nThis is a simple React component that allows you to display a 360° photo sphere.\nIt is based on [PhotoSphereViewer](https://github.com/mistic100/Photo-Sphere-Viewer) by [Mistic100](https://github.com/mistic100).\nThis component is a well managed wrapper around the original JS library. It is easy to use and has a lot of features. It is also easy to customize. It is also easy to extend.\nAddictional features are:\n\n- Little Planet Mode: display the panorama like a little planet (Similar to the DJI drones exported panoramas)\n\n## Demo\n\n[Enjoy it in this sandbox](https://codesandbox.io/p/sandbox/react-photo-sphere-viewer-playground-zd8nt8)\n\n## Usage\n\n### Using React\n\n```jsx\nimport \"./App.css\";\nimport { ReactPhotoSphereViewer } from \"react-photo-sphere-viewer\";\nimport React from \"react\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cReactPhotoSphereViewer\n        src=\"Test_Pano.jpg\"\n        height={\"100vh\"}\n        width={\"100%\"}\n      \u003e\u003c/ReactPhotoSphereViewer\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### Using Next.js\n\n\u003cdetails\u003e\n  \u003csummary\u003eWith App Router\u003c/summary\u003e\n    \n```jsx\n// # app/page.js\n\n\"use client\"\n\nimport React from \"react\";\nimport { ReactPhotoSphereViewer } from \"react-photo-sphere-viewer\";\n\n// Import plugins\nimport { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';\nimport { CompassPlugin } from '@photo-sphere-viewer/compass-plugin';\n\n// Import plugins stylesheets\nimport '@photo-sphere-viewer/markers-plugin/index.css';\nimport '@photo-sphere-viewer/compass-plugin/index.css';\n\nexport default function Home() {\n  const imgSrc = 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg'\n  const plugins = [\n    [MarkersPlugin,\n      {\n        markers: [\n          {\n            id: \"image\",\n            position: { yaw: \"0.33deg\", pitch: \"0.1deg\" },\n            image: \"vercel.svg\",\n            anchor: \"bottom center\",\n            size: { width: 128, height: 128 },\n            tooltip: \"Marker Tooltip Test\",\n          },\n        ],\n      },],\n    [CompassPlugin, {\n      hotspots: [\n        { yaw: '0deg' },\n        { yaw: '90deg' },\n        { yaw: '180deg' },\n        { yaw: '270deg' },\n      ],\n    }]\n  ]\n\n  return (\n    \u003cdiv\u003e\n      \u003cReactPhotoSphereViewer\n        src={imgSrc}\n        height={\"100vh\"}\n        width={\"100%\"}\n        plugins={plugins} \u003e\u003c/ReactPhotoSphereViewer\u003e\n    \u003c/div\u003e\n  );\n}\n\n````\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n\u003e [!IMPORTANT]\n\u003e To use `\u003cReactPhotoSphereViewer /\u003e` 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).\n\n\u003cdetails\u003e\n  \u003csummary\u003eWith Page Router\u003c/summary\u003e\n\n  1. Install [`next-transpile-modules`](https://www.npmjs.com/package/next-transpile-modules)\n  ```bash\n  $ npm install --save-dev next-transpile-modules\n````\n\n2. Update your `next.config.js` as shown below:\n\n```js\n// # next.config.js\n\nconst withTM = require(\"next-transpile-modules\")([\n  // Add this 2 modules\n  \"@photo-sphere-viewer/core\",\n  \"react-photo-sphere-viewer\",\n]);\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n};\nmodule.exports = withTM(nextConfig);\n```\n\n3. Import the CSS manually into `_app.js`:\n\n```js\n// # pages/_app.js\n\nimport \"@/styles/globals.css\";\n\n// Import plugins stylesheets\nimport \"@photo-sphere-viewer/markers-plugin/index.css\";\nimport \"@photo-sphere-viewer/compass-plugin/index.css\";\n\nexport default function App({ Component, pageProps }) {\n  return \u003cComponent {...pageProps} /\u003e;\n}\n```\n\n4. Import dynamicly `react-photo-sphere-viewer` and import the plugins manually:\n\n```jsx\n// # pages/index.js\n\nimport dynamic from \"next/dynamic\";\nconst ReactPhotoSphereViewer = dynamic(\n  () =\u003e\n    import(\"react-photo-sphere-viewer\").then(\n      (mod) =\u003e mod.ReactPhotoSphereViewer\n    ),\n  {\n    ssr: false,\n  }\n);\n\n// Import plugins\nimport { MarkersPlugin } from \"@photo-sphere-viewer/markers-plugin\";\nimport { CompassPlugin } from \"@photo-sphere-viewer/compass-plugin\";\n\nexport default function Home() {\n  const imgSrc =\n    \"https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg\";\n  const plugins = [\n    [\n      MarkersPlugin,\n      {\n        markers: [\n          {\n            id: \"image\",\n            position: { yaw: \"0.33deg\", pitch: \"0.1deg\" },\n            image: \"vercel.svg\",\n            anchor: \"bottom center\",\n            size: { width: 128, height: 128 },\n            tooltip: \"Marker Tooltip Test\",\n          },\n        ],\n      },\n    ],\n    [\n      CompassPlugin,\n      {\n        hotspots: [\n          { yaw: \"0deg\" },\n          { yaw: \"90deg\" },\n          { yaw: \"180deg\" },\n          { yaw: \"270deg\" },\n        ],\n      },\n    ],\n  ];\n\n  return (\n    \u003cdiv\u003e\n      \u003cReactPhotoSphereViewer\n        src={imgSrc}\n        height={\"100vh\"}\n        width={\"100%\"}\n        plugins={plugins}\n      \u003e\u003c/ReactPhotoSphereViewer\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n\u003c/details\u003e\n\n## Little planet mode\n\nI've added this custom effect that allows you to display the panorama like a little planet. To enable it, you need to pass the `littlePlanet` prop to the component.\n\n```jsx\n\u003cReactPhotoSphereViewer\n  src=\"Test_Pano.jpg\"\n  littlePlanet={true}\n  height={\"100vh\"}\n  width={\"100%\"}\n\u003e\u003c/ReactPhotoSphereViewer\u003e\n```\n\nThe effect is this:\n\n[](https://user-images.githubusercontent.com/14907987/180257570-4070d0b4-b3d8-493d-8f23-efde84074573.mp4)\n\n## Features\n\n### options\n\n#### Standard props\n\n```ts\ntype standardProps = {\n  src: string; // The URL of the panorama image.\n  height: number;\n  width?: number;\n  containerClass?: string; // The class name of the div that wrap the component.\n  littlePlanet?: boolean; // Display the panorama like a little planet.\n  hideNavbarButton?: boolean; // Hide the navbar button.\n};\n```\n\n#### Original props\n\nCurrently all options of the original library are supported and exported as props.\n\n```ts\n/**\n * Viewer configuration\n * @link https://photo-sphere-viewer.js.org/guide/config.html\n */\ntype ViewerConfig = {\n  container: HTMLElement | string;\n  panorama?: any;\n  /** @deprecated Use the `overlay` plugin instead */\n  overlay?: any;\n  /** @deprecated Use the `overlay` plugin instead */\n  overlayOpacity?: number;\n  /** @default equirectangular */\n  adapter?: AdapterConstructor | [AdapterConstructor, any];\n  plugins?: Array\u003cPluginConstructor | [PluginConstructor, any]\u003e;\n  /** @default null */\n  caption?: string;\n  /** @default null */\n  description?: string;\n  /** @default null */\n  downloadUrl?: string;\n  /** @default null */\n  downloadName?: string;\n  /** @default null */\n  loadingImg?: string;\n  /** @default 'Loading...' */\n  loadingTxt?: string;\n  /** @default `container` size */\n  size?: CssSize;\n  /** @default false */\n  fisheye?: boolean | number;\n  /** @default 30 */\n  minFov?: number;\n  /** @default 90 */\n  maxFov?: number;\n  /** @default 50 */\n  defaultZoomLvl?: number;\n  /** @default 0 */\n  defaultYaw?: number | string;\n  /** @default 0 */\n  defaultPitch?: number | string;\n  /** @default `0,0,0` */\n  sphereCorrection?: SphereCorrection;\n  /** @default 1 */\n  moveSpeed?: number;\n  /** @default 1 */\n  zoomSpeed?: number;\n  /** @default true */\n  moveInertia?: boolean;\n  /** @default true */\n  mousewheel?: boolean;\n  /** @default true */\n  mousemove?: boolean;\n  /** @default false */\n  mousewheelCtrlKey?: boolean;\n  /** @default false */\n  touchmoveTwoFingers?: boolean;\n  /** @deprecated configure `useXmpData` on EquirectangularAdapter */\n  useXmpData?: boolean;\n  panoData?: PanoData | PanoDataProvider;\n  requestHeaders?:\n    | Record\u003cstring, string\u003e\n    | ((url: string) =\u003e Record\u003cstring, string\u003e);\n  /** @deprecated configure `backgroundColor` on EquirectangularAdapter */\n  canvasBackground?: string;\n  /** @default '{ alpha: true, antialias: true }' */\n  rendererParameters?: WebGLRendererParameters;\n  /** @default false */\n  withCredentials?: boolean;\n  /** @default 'zoom move download description caption fullscreen' */\n  navbar?: boolean | string | Array\u003cstring | NavbarCustomButton\u003e;\n  lang?: {\n    zoom: string;\n    zoomOut: string;\n    zoomIn: string;\n    moveUp: string;\n    moveDown: string;\n    moveLeft: string;\n    moveRight: string;\n    download: string;\n    fullscreen: string;\n    menu: string;\n    close: string;\n    twoFingers: string;\n    ctrlZoom: string;\n    loadError: string;\n    littlePlanetButton: string;\n    littlePlanetIcon: string;\n    [K: string]: string;\n  };\n  keyboard?:\n    | boolean\n    | \"always\"\n    | \"fullscreen\"\n    | Record\u003cstring, ACTIONS | ((viewer: Viewer) =\u003e void)\u003e;\n  keyboardActions?: Record\u003cstring, ACTIONS | ((viewer: Viewer) =\u003e void)\u003e;\n};\n```\n\n\u003e This code is generated from the original library. Click [here](http://photo-sphere-viewer.js.org/guide/config.html) to see documentation.\n\n### Plugins\n\nTo 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.\n\n\u003e 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.\n\n```jsx\nimport { ReactPhotoSphereViewer } from \"react-photo-sphere-viewer\";\nimport { LensflarePlugin } from \"photo-sphere-viewer-lensflare-plugin\";\nimport { CompassPlugin } from \"@photo-sphere-viewer/compass-plugin\";\nimport { MarkersPlugin } from \"@photo-sphere-viewer/markers-plugin\";\n\nfunction App() {\n  const plugins = [\n    [\n      LensflarePlugin,\n      {\n        // list of lensflares\n        lensflares: [\n          {\n            id: \"sun\",\n            position: { yaw: \"145deg\", pitch: \"2deg\" },\n            type: 0,\n          },\n        ],\n      },\n    ],\n    [\n      CompassPlugin,\n      {\n        hotspots: [\n          { yaw: \"0deg\" },\n          { yaw: \"90deg\" },\n          { yaw: \"180deg\" },\n          { yaw: \"270deg\" },\n        ],\n      },\n    ],\n    [\n      MarkersPlugin,\n      {\n        markers: [\n          {\n            id: \"polygon\",\n            polygonPx: [\n              2941, 1413, 3042, 1402, 3222, 1419, 3433, 1463, 3480, 1505, 3438,\n              1538, 3241, 1543, 3041, 1555, 2854, 1559, 2739, 1516, 2775, 1469,\n              2941, 1413,\n            ],\n            svgStyle: {\n              fill: \"rgba(255,0,0,0.2)\",\n              stroke: \"rgba(255, 0, 50, 0.8)\",\n              strokeWidth: \"2px\",\n            },\n            data: { compass: \"rgba(255, 0, 50, 0.8)\" },\n          },\n          {\n            id: \"polyline\",\n            polylinePx: [\n              2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301,\n              1519, 94, 1399, 34, 1356,\n            ],\n            svgStyle: {\n              stroke: \"rgba(80, 150, 50, 0.8)\",\n              strokeLinecap: \"round\",\n              strokeLinejoin: \"round\",\n              strokeWidth: \"20px\",\n            },\n            data: { compass: \"rgba(80, 150, 50, 0.8)\" },\n          },\n        ],\n      },\n    ],\n  ];\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cReactPhotoSphereViewer\n        src=\"Test_pano.jpg\"\n        plugins={plugins}\n        height={\"100vh\"}\n        width={\"100%\"}\n      \u003e\u003c/ReactPhotoSphereViewer\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n#### Calling plugin methods and handling events from outside the component [**NEW**](https://github.com/Elius94/react-photo-sphere-viewer/issues/6)\n\nTo handle events from outside the component, you need to declare the callback function in the `onReady(instance: Viewer)` prop. The `instance` is the instance of the viewer. You can call the plugin methods using the `instance.getPlugin()` method. The `instance.getPlugin()` method returns the plugin instance. You can call the plugin methods using the plugin instance.\n\n```jsx\nconst handleReady = (instance) =\u003e {\n  const markersPlugs = instance.getPlugin(MarkersPlugin);\n  if (!markersPlugs) return;\n  markersPlugs.addMarker({\n    id: \"imageLayer2\",\n    image: \"drone.png\",\n    size: { width: 220, height: 220 },\n    position: { yaw: \"130.5deg\", pitch: \"-0.1deg\" },\n    tooltip: \"Image embedded in the scene\",\n  });\n  markersPlugs.addEventListener(\"select-marker\", () =\u003e {\n    console.log(\"asd\");\n  });\n};\n\nreturn (\n  \u003cdiv className=\"App\"\u003e\n    \u003cReactPhotoSphereViewer\n      src=\"Test_pano.jpg\"\n      plugins={plugins}\n      height={\"100vh\"}\n      width={\"100%\"}\n      onReady={handleReady}\n    \u003e\u003c/ReactPhotoSphereViewer\u003e\n  \u003c/div\u003e\n);\n```\n\n\u003e Click [here](https://photo-sphere-viewer.js.org/plugins/) to see plugins documentation.\n\n### Note for Virtual Tour Plugin\n\nPlease follow this Sandbox template to see how to use the original plugin: [Sandbox](https://codesandbox.io/p/sandbox/mj2p5k)\n\nPlease 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)\nIf you want to use virtual tour functions, you can store them to a React state: [#69](https://github.com/Elius94/react-photo-sphere-viewer/issues/69#issuecomment-2606710741)\n\n```jsx\nconst handleReady = useCallback((instance) =\u003e {\n    const animate = instance.animate.bind(instance); // Extract the \"animate\" function for example.\n    setAnimateFunction(() =\u003e animate); // Store function into state\n  }, []);\n```\nThis quick tip can be used to call every library method.\n\n### Adapters (NEW - 3.1.0-psv5.0.1)\n\nTo use the standard library adapters provided by the original library, you need to pass the `adapter` prop to the component. The prop is an array of adapters. Each adapter 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 \"react-photo-sphere-viewer\" package.\n\n```jsx\nimport {\n  CubemapAdapter,\n  CubemapAdapterOptions,\n} from \"@photo-sphere-viewer/cubemap-adapter\";\n```\n\n\u003e Click [here](https://photo-sphere-viewer.js.org/guide/adapters/) to see adapters documentation.\n\n### events\n\nAll documented events are exported as props (function names).\n\n```ts\ntype ViewerEvents = {\n  onPositionChange?(lat: number, lng: number, instance: Viewer): any;\n  onZoomChange?(\n    data: events.ZoomUpdatedEvent \u0026 { type: \"zoom-updated\" },\n    instance: Viewer\n  ): any;\n  onClick?(data: events.ClickEvent \u0026 { type: \"click\" }, instance: Viewer): void;\n  onDblclick?(\n    data: events.ClickEvent \u0026 { type: \"dblclick\" },\n    instance: Viewer\n  ): void;\n  onReady?(instance: Viewer): void;\n};\n```\n\nYou can declare an event callback:\n\n```js\nconst handleClick = (data: events.ClickEvent \u0026 { type: \"click\" }) =\u003e {\n  console.log(data);\n};\n```\n\nand then:\n\n```jsx\n{\n  /*Pass the callback to the component*/\n}\n\u003cReactPhotoSphereViewer\n  ref={photoSphereRef}\n  src=\"Test_Pano.jpg\"\n  onClick={handleClick}\n\u003e\u003c/ReactPhotoSphereViewer\u003e;\n```\n\n\u003e To see the original events, click [here](http://photo-sphere-viewer.js.org/guide/events.html).\n\n### methods\n\nTo trigger a method you need to pass a reference to the component and access the method directly.\n\n```js\n// Create a reference to the component\nconst photoSphereRef = React.createRef\u003cReactPhotoSphereViewer\u003e();\n\n// And calling the method\nphotoSphereRef.current.zoom(10);\n\n// Or to be sure that the component is mounted\nReact.useEffect(() =\u003e {\n  if (!photoSphereRef.current)\n    return;\n  photoSphereRef.current.animate({\n    yaw: 0,\n    pitch: 0,\n    zoom: 55,\n    speed: '10rpm',\n  }); // Or any other method\n}, [photoSphereRef]);\n\n```\n\nAnd then:\n\n```jsx\n{\n  /*Pass the ref to the component*/\n}\n\u003cReactPhotoSphereViewer\n  ref={photoSphereRef}\n  src=\"Test_Pano.jpg\"\n\u003e\u003c/ReactPhotoSphereViewer\u003e;\n```\n\nCurrently managed methods are:\n\n- animate(options: AnimateOptions): utils.Animation\u003cany\u003e;\n- destroy(): void;\n- createTooltip(config: TooltipConfig): Tooltip;\n- needsContinuousUpdate(enabled: boolean): void;\n- observeObjects(userDataKey: string): void;\n- unobserveObjects(userDataKey: string): void;\n- setCursor(cursor: string): void;\n- stopAnimation(): PromiseLike\u003cany\u003e;\n- rotate(position: ExtendedPosition): void;\n- setOption(option: keyof UpdatableViewerConfig, value: unknown): void;\n- setOptions(options: Partial\u003cUpdatableViewerConfig\u003e): void;\n- getCurrentNavbar(): (string | object)[] | void;\n- zoom(value: number): void;\n- zoomIn(step: number): void;\n- zoomOut(step: number): void;\n- resize(size: CssSize): void;\n- enterFullscreen(): void;\n- exitFullscreen(): void;\n- toggleFullscreen(): void;\n- isFullscreenEnabled(): boolean | void;\n- startAutoRotate(): void;\n- stopAutoRotate(): void;\n- getPlugin\u003cT\u003e(pluginId: string | PluginConstructor): T;\n- getPosition(): Position; // Specify the return type\n- getZoomLevel(): number; // Specify the return type\n- getSize(): Size; // Specify the return type\n- needsUpdate(): void;\n- autoSize(): void;\n- setPanorama(path: any, options?: PanoramaOptions): Promise\u003cboolean\u003e;\n- toggleAutorotate(): void;\n- showError(message: string): void;\n- hideError(): void;\n- startKeyboardControl(): void;\n- stopKeyboardControl(): void;\n\n\u003e To see the original methods, click [here](http://photo-sphere-viewer.js.org/guide/methods.html).\n\n## License\n\nMIT © [elius94](https://github.com/elius94)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felius94%2Freact-photo-sphere-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felius94%2Freact-photo-sphere-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felius94%2Freact-photo-sphere-viewer/lists"}