### Page Preview using Framer Publish Info

Source: https://www.framer.com/developers/site/index

This example demonstrates how to use the `usePublishInfo` hook to get the current page's staging URL and render it within an iframe. It includes a conditional check to ensure the site has been published before attempting to display the preview.

```typescript
import { useState, useEffect } from "react";
import { framer, PublishInfo } from "@framer/core";

function usePublishInfo() {
  const [publishInfo, setPublishInfo] = useState<PublishInfo>();

  useEffect(() => {
    return framer.subscribeToPublishInfo(setPublishInfo);
  }, []);

  return publishInfo;
}

function PagePreview() {
  const publishInfo = usePublishInfo();
  const stagingUrl = publishInfo?.staging?.currentPageUrl;

  if (!stagingUrl) return "Publish your Site";

  return (
    <iframe src={stagingUrl} />
  );
}
```

--------------------------------

### Get and Subscribe to Publish Info in Framer

Source: https://www.framer.com/developers/site/index

This snippet shows how to retrieve and subscribe to published site information using Framer's API. `getPublishInfo()` fetches the current publish details, while `subscribeToPublishInfo()` allows real-time updates. The `PublishInfo` type contains details for staging and production environments.

```typescript
import { useState, useEffect } from "react";
import { framer, PublishInfo } from "@framer/core";

function usePublishInfo() {
  const [publishInfo, setPublishInfo] = useState<PublishInfo>();

  useEffect(() => {
    return framer.subscribeToPublishInfo(setPublishInfo);
  }, []);

  return publishInfo;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.