open-index/open-npm huggingface dataset:
npm package: @immersivehomes/panorama-viewer
Description: Provides React components to render panoramas.
Author: Immersive Homes
Latest version: 2.3.1

[panorama-ue-plugin]: https://github.com/Manufactured-Communities-Management/panorama-ue-plugin/
[panorama-frontend]: https://github.com/Manufactured-Communities-Management/panorama-frontend/

[![On Push to Master](https://github.com/Manufactured-Communities-Management/panorama-js-plugin/actions/workflows/on-push-to-master.yaml/badge.svg)](https://github.com/Manufactured-Communities-Management/panorama-js-plugin/actions/workflows/on-push-to-master.yaml)

# @mcmhomes/panorama-viewer

**@mcmhomes/panorama-viewer** is a React library, made for visualizing the panorama pictures made by the [MCM Panorama UnrealEngine plugin][panorama-ue-plugin].

## Installation

To install the library, run the following command:

```bash
npm install @mcmhomes/panorama-viewer
```

## Usage

To show a panorama picture, you can use the `PanoramaViewer` component, like so:

```jsx
import {PanoramaViewer} from '@mcmhomes/panorama-viewer';

...

<PanoramaViewer homeId="xxxxxxxxx"/>
```

### Using PanoramaViewerCore with pre-fetched variations

If you need more control over when variations are fetched, you can use the `PanoramaViewerCore` component along with the `useVariationJsonData` hook:

```jsx
import {PanoramaViewerCore, useVariationJsonData, PanoramaDefaultLoadingWidget, useVariationJsonData, PanoramaDefaultErrorWidget} from '@mcmhomes/panorama-viewer';

...

const [variations, variationsLoading, variationsError] = useVariationJsonData({homeId, homeVersion, host});

{variationsLoading ? (
  <PanoramaDefaultLoadingWidget />
) : variationsError || !variationData?.data ? (
  <PanoramaDefaultErrorWidget
    message={`Couldn't connect to home: ${homeId}`}
    reason={variationsError || 'variations data is missing'}
  />
) : (
  <PanoramaViewerCore
    homeId={homeId}
    homeVersion={homeVersion}
    host={host}
    variations={variationData}
    skus={currentSkuIds}
    locationId={currentLocationId}
    styleId={currentStyleId}
  />
)}
```

The `PanoramaViewerCore` component expects the `variations` prop to be passed directly, skipping the internal fetch.

The `PanoramaViewer` component can be found in the [PanoramaViewer.jsx](https://github.com/Manufactured-Communities-Management/panorama-js-plugin/blob/master/src/components/PanoramaViewer.jsx) file.

The provided utility functions can be found in the [PanoramaViewerUtils.jsx](https://github.com/Manufactured-Communities-Management/panorama-js-plugin/blob/master/src/components/PanoramaViewerUtils.jsx) file.

For example code, see the [MCM Panorama Demo Frontend][panorama-frontend], the [AppViewer.jsx](https://github.com/Manufactured-Communities-Management/panorama-frontend/blob/master/src/components/AppViewer.jsx) file in particular.

## Rendering panorama pictures

For information on how to render panorama pictures, and how to process them, see the [MCM Panorama UnrealEngine plugin][panorama-ue-plugin].

## Contributing

Contributions are welcome! Please read the [CONTRIBUTING.md](CONTRIBUTING.md) for details on the process for submitting pull requests.