@shopify/shopify-app-remix/dist/cjs/react/components/AppProxyLink/AppProxyLink.js

Shopify Remix - to simplify the building of Shopify Apps with Remix

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var AppProxyProvider = require('../AppProxyProvider/AppProxyProvider.js');

/**
 * Sets up an `<a />` HTML element that works when rendered behind an app proxy.
 *
 * Supports any properties accepted by the `<a />` HTML element.
 *
 * @example
 * <caption>Link to a different route.</caption>
 * <description>Use an `AppProxyLink` within an `AppProxyProvider` to link to a different proxied route.</description>
 * ```ts
 * // /app/routes/**\/*.ts
 * import {authenticate} from '~/shopify.server';
 * import {AppProxyProvider, AppProxyLink} from '@shopify/shopify-app-remix/react';
 *
 * export async function loader({ request }) {
 *   await authenticate.public.appProxy(request);
 *
 *   return json({ appUrl: process.env.SHOPIFY_APP_URL });
 * }
 *
 * export default function App() {
 *   const { appUrl } = useLoaderData();
 *
 *   return (
 *     <AppProxyProvider appUrl={appUrl}>
 *       <AppProxyLink href="/other-proxy-route">Link to another route</AppProxyLink>
 *     </AppProxyProvider>
 *   );
 * }
 * ```
 * @publicDocs
 */
const AppProxyLink = React.forwardRef(function AppProxyLink(props, ref) {
    const context = React.useContext(AppProxyProvider.AppProxyProviderContext);
    if (!context) {
        throw new Error('AppProxyLink must be used within an AppProxyProvider component');
    }
    const { children, href, ...otherProps } = props;
    return (jsxRuntime.jsx("a", { href: context.formatUrl(href), ...otherProps, ref: ref, children: children }));
});

exports.AppProxyLink = AppProxyLink;
//# sourceMappingURL=AppProxyLink.js.map