diff --git a/src/react/snippet.tsx b/src/react/snippet.tsx index cb2a6a95..801bfa35 100644 --- a/src/react/snippet.tsx +++ b/src/react/snippet.tsx @@ -9,7 +9,9 @@ import { partytownSnippet } from '@builder.io/partytown/integration'; * * @public */ -export interface PartytownProps extends PartytownConfig {} +export interface PartytownProps extends PartytownConfig { + nonce?: string; +} /** * The React `` component should be placed within the `` @@ -20,7 +22,7 @@ export interface PartytownProps extends PartytownConfig {} * * @public */ -export const Partytown = (props: PartytownProps = {}): any => { +export const Partytown = ({ nonce, ...props }: PartytownProps = {}): any => { // purposely not using useState() or useEffect() so this component // can also work as a React Server Component @@ -35,6 +37,7 @@ export const Partytown = (props: PartytownProps = {}): any => { const scriptElm = document.createElement('script'); scriptElm.dataset.partytown = ''; scriptElm.innerHTML = partytownSnippet(props); + scriptElm.nonce = nonce; document.head.appendChild(scriptElm); } // should only append this script once per document, and is not dynamic @@ -48,7 +51,13 @@ export const Partytown = (props: PartytownProps = {}): any => { // add the same script to the . const innerHTML = partytownSnippet(props) + 'document.currentScript.dataset.partytown="";'; - return