import React from 'react';
interface BaseProps {
children: React.ReactNode;
/**
* Optional slot to render router devtools (for example, ``).
*
* This lets apps mount devtools in one place without this package depending on
* a specific devtools package.
*/
routerDevtools?: React.ReactNode;
/**
* Controls whether `routerDevtools` should be rendered.
*
* Defaults to `true` so you can keep the element wired up and disable it
* conditionally (for example, in production).
*/
enableRouterDevtools?: boolean;
}
interface EmbeddedProps extends BaseProps {
/**
* If this route should be rendered inside the Shopify admin.
*
* Setting this to true will include the App Bridge script on the page.
* If true and the route is loaded outside the Shopify admin, then the user will be redirected to the Shopify admin.
*
* Setting this to false will not include the App Bridge script on the page.
*
* {@link https://shopify.dev/docs/apps/admin/embedded-app-home}
*/
embedded: true;
/**
* The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.
*
* When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment
* variable, then you need to pass it from the loader to the component.
*/
apiKey: string;
}
interface NonEmbeddedProps extends BaseProps {
/**
* If this route should be rendered inside the Shopify admin.
*
* Setting this to false means only Polaris Web components will be added to the route, not App Bridge.
*
* Setting this to true will include the App Bridge script on the page.
*
* {@link https://shopify.dev/docs/apps/admin/embedded-app-home}
*/
embedded?: false;
}
/**
* Props for the `AppProvider` component.
* @publicDocs
*/
export type AppProviderProps = NonEmbeddedProps | EmbeddedProps;
/**
* Sets up your app to look like the admin
*
* Adds Polaris Web components to the route.
* If embedded is true and apiKey is provided, then the App Bridge script will be added to the page.
*
* {@link https://shopify.dev/docs/apps/admin/embedded-app-home}
* {@link https://shopify.dev/docs/api/app-home/using-polaris-components}
* {@link https://shopify.dev/tools/app-bridge}
*
* @example
*
Set up AppProvider for an embedded route
* Wrap your route in the `AppProvider` component and pass in your API key.
* ```ts
* // /app/routes/**\/*.ts
* import {useLoaderData} from '@tanstack/react-router';
* import {authenticate} from '~/shopify.server';
* import {AppProvider} from '@yan-ad/shopify-app-tanstack/react';
*
* export async function loader({ request }) {
* await authenticate.admin(request);
*
* return { apiKey: process.env.SHOPIFY_API_KEY };
* }
*
* export default function App() {
* const { apiKey } = useLoaderData();
*
* return (
*
*
*
* );
* }
* ```
*
* @example
* Set up AppProvider for a non-embedded route
* Add Polaris web components to the route, without adding the App Bridge script.
* ```ts
* // /app/routes/**\/*.ts
* import {AppProvider} from '@yan-ad/shopify-app-tanstack/react';
*
* export default function App() {
* return (
*
*
*
* );
* }
* ```
*/
export declare function AppProvider(props: AppProviderProps): import("react/jsx-runtime").JSX.Element;
export {};