{"_id":"@alexjball/react-photo-sphere-viewer","name":"@alexjball/react-photo-sphere-viewer","dist-tags":{"latest":"3.1.3-psv5.0.2"},"versions":{"3.1.3-psv5.0.2":{"name":"@alexjball/react-photo-sphere-viewer","version":"3.1.3-psv5.0.2","description":"Photosphere Viewer for React.JS, wrapper of photo-sphere-viewer.js","author":{"name":"Elius94"},"license":"MIT","keywords":["react","photosphere","viewer","360","panorama","photo","sphere","photo-sphere-viewer","react-photo-sphere-viewer"],"repository":{"type":"git","url":"git+https://github.com/elius94/react-photo-sphere-viewer.git"},"main":"dist/index.js","module":"dist/index.js","jsnext:main":"dist/index.js","types":"dist/index.d.ts","type":"module","engines":{"node":">=8","npm":">=5"},"scripts":{"clean":"rimraf dist/","copy-files":"copyfiles -u 1 src/**/*.css dist/","build":"npm run clean && rollup -c && npm run copy-files","start":"rollup -c -w","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build"},"dependencies":{"@photo-sphere-viewer/autorotate-plugin":"^5.0.2","@photo-sphere-viewer/compass-plugin":"^5.0.2","@photo-sphere-viewer/core":"^5.0.2","@photo-sphere-viewer/cubemap-adapter":"^5.0.2","@photo-sphere-viewer/cubemap-tiles-adapter":"^5.0.2","@photo-sphere-viewer/cubemap-video-adapter":"^5.0.2","@photo-sphere-viewer/equirectangular-tiles-adapter":"^5.0.2","@photo-sphere-viewer/equirectangular-video-adapter":"^5.0.2","@photo-sphere-viewer/gallery-plugin":"^5.0.2","@photo-sphere-viewer/gyroscope-plugin":"^5.0.2","@photo-sphere-viewer/markers-plugin":"^5.0.2","@photo-sphere-viewer/resolution-plugin":"^5.0.2","@photo-sphere-viewer/settings-plugin":"^5.0.2","@photo-sphere-viewer/stereo-plugin":"^5.0.2","@photo-sphere-viewer/video-plugin":"^5.0.2","@photo-sphere-viewer/virtual-tour-plugin":"^5.0.2","@photo-sphere-viewer/visible-range-plugin":"^5.0.2","autoprefixer":"^10.4.13","eventemitter3":"^5.0.0"},"peerDependencies":{"prop-types":"^15.5.4","react":">=16.0.0","react-dom":">=16.0.0"},"devDependencies":{"@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.0","@rollup/plugin-eslint":"^9.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-url":"^8.0.1","@svgr/rollup":"^6.5.1","@types/estree":"^1.0.0","@types/jest":"^29.2.5","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-core":"^6.26.3","babel-plugin-styled-components":"^2.0.7","babel-runtime":"^6.26.0","copyfiles":"^2.4.1","cross-env":"^7.0.3","gh-pages":"^4.0.0","rimraf":"^3.0.2","rollup":"^3.0.0","rollup-plugin-postcss":"^4.0.2","tslib":"^2.4.1","typescript":"^4.9.4"},"gitHead":"c785e4d27e04e87fb80537a8527c0da1f807d82c","bugs":{"url":"https://github.com/elius94/react-photo-sphere-viewer/issues"},"homepage":"https://github.com/elius94/react-photo-sphere-viewer#readme","_id":"@alexjball/react-photo-sphere-viewer@3.1.3-psv5.0.2","_nodeVersion":"18.10.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-MbtFEjQoIJ4UtbmDmjzn7JFGLp6TpbSL6AbMnnGMIBK6WGpmwSI12PYBh48ffSk9VLrUFCVNvpzzny6Odvw7PQ==","shasum":"cbf5b7388b7424cff74cc47d15cc99bc4906a022","tarball":"https://registry.npmjs.org/@alexjball/react-photo-sphere-viewer/-/react-photo-sphere-viewer-3.1.3-psv5.0.2.tgz","fileCount":59,"unpackedSize":4971811,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnI941LnwzDuTO9SjOTSBgiEuejbno+WG/lbo1aEE5tAIhAP2cfvonCUKKONeDZy1Q9OHwRU5ylEKH0R6eq1mk+vw8"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyy0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQzw/6A5QOEGg8LyPOO1mZC9OxQpYtGTITjh3IaW8A7ES60DDMcu6C\r\nSvs8inj5VXvGFMqHTkKemhNxj68F46G+C4XxQmQyJmaTU5H+koIM1drvNTr5\r\nlm/HwlibD8btwHdslT6vSxkpBQcM2EIV28IE7DnjlNfvsTX7sow7DjWtfXX5\r\nBsOYc20QpgSkytKWiHAxLOxbDWFw4TmFvCnmHOQJrVh5Oe3kaiG8zfi4qaTP\r\naaisgUgdyg0IlgY8brm2mnEbZwtq+KWfec0o5xOKVHkGUdqzM42XHddOwnx6\r\ntZZXpCx1eZSNXXhvd22cSGZZ+Yxr6HH6iW6RVSSS4MU32+3d9Omod4eaP/5L\r\ns3yeG9SE92gCqMxPaQx5uDSoHGAnB9BzwymXjQx0CTRxqfQFW1zJGd3sXfMr\r\namAEyM3WCXfiPPWVCOFXFSwmNN/xwznqzKGanUQSTt3kUFRO8/huG73qDTDc\r\n2IA6JvNjGQFMjVKgpZH6mL6suXDkNFwDkr3bs06pvYnEcaqt5ZvcMQj5SQnr\r\nDcoYfzOb24HAz17TTLodcjXLpR+HHsRWn0VkreQAAGVQXjyghDw1JkftMuk7\r\nnVmpoKuXw8nEDarfxTZn7KUMtwxNq0X18i0PxdpqQDdGbJIWXwcJkY26CMBI\r\ndue02jvR/8cN6IJ/lPhXpTBigASh+S4j79c=\r\n=3MK4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexjball","email":"me@alexjball.com"},"directories":{},"maintainers":[{"name":"alexjball","email":"me@alexjball.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-photo-sphere-viewer_3.1.3-psv5.0.2_1673473203941_0.06411935075323627"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-11T21:40:03.859Z","3.1.3-psv5.0.2":"2023-01-11T21:40:04.129Z","modified":"2023-01-11T21:40:04.283Z"},"maintainers":[{"name":"alexjball","email":"me@alexjball.com"}],"description":"Photosphere Viewer for React.JS, wrapper of photo-sphere-viewer.js","homepage":"https://github.com/elius94/react-photo-sphere-viewer#readme","keywords":["react","photosphere","viewer","360","panorama","photo","sphere","photo-sphere-viewer","react-photo-sphere-viewer"],"repository":{"type":"git","url":"git+https://github.com/elius94/react-photo-sphere-viewer.git"},"author":{"name":"Elius94"},"bugs":{"url":"https://github.com/elius94/react-photo-sphere-viewer/issues"},"license":"MIT","readme":"# react-photo-sphere-viewer\n> Photosphere Viewer for React.JS\n\n![Screenshot](https://user-images.githubusercontent.com/14907987/194562000-0411b51e-f017-468a-a51c-c6ce6df9b629.png)\n\n\n```bash\nnpm install react-photo-sphere-viewer\n```\n\n## Library Version\nOriginal Wrapped Library: [PhotoSphereViewer](https://github.com/mistic100/Photo-Sphere-Viewer) Version: 5.0.2 [<font color=\"green\">**NEW**</font>]\nNow 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 3.1.1-psv5.0.2. This means that the wrapper is in version 3.1.1 and the original library [psv](https://github.com/mistic100/Photo-Sphere-Viewer) is in version 5.0.2.\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 - Little Planet Mode: display the panorama like a little planet (Similar to the DJI drones exported panoramas)\n\n ## Demo\n [Enjoy it in this sandbox](https://codesandbox.io/s/sandbox-react-photo-sphere-viewer-by-elius94-j064sm?file=/src/App.js)\n\n## Usage\n\n* Using React\n```jsx\nimport './App.css';\nimport { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';\nimport React from 'react';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <ReactPhotoSphereViewer src=\"Test_Pano.jpg\" height={'100vh'} width={\"100%\"}></ReactPhotoSphereViewer>\n    </div>\n  );\n}\n\nexport default App;\n```\n\n* Using Next.js\n```jsx\nimport './App.css';\nimport React, { useEffect, useRef } from 'react';\nimport dynamic from 'next/dynamic';\n\n// import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';\nconst ReactPhotoSphereViewer = dynamic(\n  () =>\n    import('react-photo-sphere-viewer').then(\n      (mod) => mod.ReactPhotoSphereViewer\n    ),\n  {\n    ssr: false,\n  }\n);\n\nexport default function Home() {  \n  return (\n    <div className=\"App\">\n      <ReactPhotoSphereViewer src=\"Test_Pano.jpg\" height={'100vh'} width={\"100%\"}></ReactPhotoSphereViewer>\n    </div>\n  );\n}\n```\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<ReactPhotoSphereViewer src=\"Test_Pano.jpg\" littlePlanet={true} height={'100vh'} width={\"100%\"}></ReactPhotoSphereViewer>\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### options\n#### Standard props\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}\n```\n#### Original props\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    overlay?: any;\n    /** @default 1 */\n    overlayOpacity?: number;\n    /** @default equirectangular */\n    adapter?: AdapterConstructor | [AdapterConstructor, any];\n    plugins?: Array<PluginConstructor | [PluginConstructor, any]>;\n    /** @default null */\n    caption?: string;\n    /** @default null */\n    description?: string;\n    /** @default null */\n    downloadUrl?: 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    /** @deprecated use `defaultYaw` */\n    defaultLong?: number;\n    /** @deprecated use `defaultPitch` */\n    defaultLat?: 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    /** @deprecated use the 'autorotate' plugin */\n    autorotateDelay?: number | null;\n    /** @deprecated use the 'autorotate' plugin */\n    autorotateIdle?: boolean;\n    /** @deprecated use the 'autorotate' plugin */\n    autorotateSpeed?: string | number;\n    /** @deprecated use the 'autorotate' plugin */\n    autorotateLat?: number;\n    /** @deprecated use the 'autorotate' plugin */\n    autorotateZoomLvl?: 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    /** @default true */\n    useXmpData?: boolean;\n    panoData?: PanoData | PanoDataProvider;\n    requestHeaders?: Record<string, string> | ((url: string) => Record<string, string>);\n    /** @default '#000' */\n    canvasBackground?: string;\n    /** @default false */\n    withCredentials?: boolean;\n    /** @default 'autorotate zoom move download description caption fullscreen' */\n    navbar?: boolean | string | Array<string | NavbarCustomButton>;\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        twoFingers: string;\n        ctrlZoom: string;\n        loadError: string;\n        [K: string]: string;\n    };\n    keyboard?: boolean | Record<string, ACTIONS>;\n};\n```\n> 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\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 \"react-photo-sphere-viewer\" package.\n\n```jsx\nimport { ReactPhotoSphereViewer, CompassPlugin, MarkersPlugin } from 'react-photo-sphere-viewer';\n\nfunction App() {\n  const plugins = [\n    [CompassPlugin, {\n      hotspots: [\n        { longitude: '0deg' },\n        { longitude: '90deg' },\n        { longitude: '180deg' },\n        { longitude: '270deg' },\n      ],\n    }],\n    [MarkersPlugin, {\n      markers: [\n        {\n          id: 'polygon',\n          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 ],\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: [2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301, 1519, 94, 1399, 34, 1356],\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    <div className=\"App\">\n      <ReactPhotoSphereViewer src=\"Test_pano.jpg\" plugins={plugins} height={'100vh'} width={\"100%\"}></ReactPhotoSphereViewer>\n    </div>\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) => {\n  const markersPlugs = instance.getPlugin(MarkersPlugin);\n  if (!markersPlugs)\n    return;\n  markersPlugs.addMarker({\n    id: \"imageLayer2\",\n    imageLayer: \"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\", () => {\n    console.log(\"asd\");\n  });\n}\n\nreturn (\n  <div className=\"App\">\n    <ReactPhotoSphereViewer src=\"Test_pano.jpg\" plugins={plugins} height={'100vh'} width={\"100%\"} onReady={handleReady}></ReactPhotoSphereViewer>\n  </div>\n);\n```\n\n> Click [here](https://photo-sphere-viewer.js.org/plugins/) to see plugins documentation.\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\n\nimport { CubemapAdapter, CubemapAdapterOptions } from 'react-photo-sphere-viewer';\n```\n\n> Click [here](https://photo-sphere-viewer.js.org/guide/adapters/) to see adapters documentation.\n\n### events\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?(data: events.ZoomUpdatedEvent & { type: \"zoom-updated\"; }, instance: Viewer): any;\n  onClick?(data: events.ClickEvent & { type: \"click\"; }, instance: Viewer): void;\n  onDblclick?(data: events.ClickEvent & { type: \"dblclick\"; }, instance: Viewer): void;\n  onReady?(instance: Viewer): void;\n}\n```\n\nYou can declare an event callback:\n```js\nconst handleClick = (data: events.ClickEvent & { type: \"click\"; }) => {\n  console.log(data);\n}\n```\nand then:\n```jsx\n{/*Pass the callback to the component*/}\n<ReactPhotoSphereViewer ref={photoSphereRef} src=\"Test_Pano.jpg\" onClick={handleClick}></ReactPhotoSphereViewer>\n```\n\n> To see the original events, click [here](http://photo-sphere-viewer.js.org/guide/events.html).\n\n### methods\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<ReactPhotoSphereViewer>();\n\n// And calling the method\nphotoSphereRef.current.zoom(10);\n\n// Or to be sure that the component is mounted\nReact.useEffect(() => {\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```\nAnd then:\n```jsx\n{/*Pass the ref to the component*/}\n<ReactPhotoSphereViewer ref={photoSphereRef} src=\"Test_Pano.jpg\"></ReactPhotoSphereViewer>\n```\nCurrently managed methods are:\n - animate(options: AnimateOptions)\n - destroy()\n - rotate(options: { x: number, y: number })\n - setOption(option: keyof ViewerOptions, value: any)\n - setOptions(options: ViewerOptions)\n - zoom(value: number)\n - zoomIn()\n - zoomOut()\n - resize(size: CssSize)\n - enterFullscreen()\n - exitFullscreen()\n - toggleFullscreen()\n - isFullscreenEnabled()\n - getPlugin(pluginName: string)\n - getPosition()\n - getZoomLevel()\n - getSize()\n - needsUpdate()\n - autoSize()\n - setPanorama(path: string, options?: object)\n - setOverlay(path: string, opacity?: number)\n - toggleAutorotate()\n - showError(message: string)\n - hideError()\n - startKeyboardControl()\n - stopKeyboardControl()\n\n> To see the original methods, click [here](http://photo-sphere-viewer.js.org/guide/methods.html).\n\n\n## License\n\nMIT © [elius94](https://github.com/elius94)\n","readmeFilename":"README.md"}