[{"data":1,"prerenderedAt":420},["ShallowReactive",2],{"navigation_docs":3,"-frameworks-react":45,"-frameworks-react-surround":415},[4,8,12,16,20,24],{"title":5,"path":6,"stem":7},"Introduction","\u002Fintroduction","1.introduction",{"title":9,"path":10,"stem":11},"Installation","\u002Finstallation","2.installation",{"title":13,"path":14,"stem":15},"SDKs","\u002Fsdk","3.sdk",{"title":17,"path":18,"stem":19},"Dashboard","\u002Fdashboard","4.dashboard",{"title":21,"path":22,"stem":23},"HTTP API","\u002Fhttp-api","5.http-api",{"title":25,"path":26,"stem":27,"children":28},"Framework Components","\u002Fframeworks","frameworks",[29,33,37,41],{"title":30,"path":31,"stem":32},"Qwik","\u002Fframeworks\u002Fqwik","frameworks\u002Fqwik",{"title":34,"path":35,"stem":36},"React","\u002Fframeworks\u002Freact","frameworks\u002Freact",{"title":38,"path":39,"stem":40},"Svelte","\u002Fframeworks\u002Fsvelte","frameworks\u002Fsvelte",{"title":42,"path":43,"stem":44},"Vue","\u002Fframeworks\u002Fvue","frameworks\u002Fvue",{"id":46,"title":34,"body":47,"description":409,"extension":410,"links":411,"meta":412,"navigation":113,"path":35,"seo":413,"stem":36,"__hash__":414},"docs\u002Fframeworks\u002Freact.md",{"type":48,"value":49,"toc":405},"minimark",[50,59,64,300,304,401],[51,52,53,54,58],"p",{},"The ",[55,56,57],"code",{},"@pichaflow\u002Freact"," package provides a functional upload component.",[60,61,63],"h2",{"id":62},"usage","Usage",[65,66,71],"pre",{"className":67,"code":68,"language":69,"meta":70,"style":70},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { PichaUpload } from '@pichaflow\u002Freact';\n\nexport default function MyPage() {\n  const handleSuccess = (res) => {\n    console.log('Upload complete:', res.id);\n  };\n\n  return (\n    \u003CPichaUpload\n      apiKey=\"sk_live_...\"\n      onSuccess={handleSuccess}\n      className=\"my-custom-dropzone\"\n    \u002F>\n  );\n}\n","jsx","",[55,72,73,108,115,138,165,203,209,214,223,233,251,266,281,287,295],{"__ignoreMap":70},[74,75,78,82,86,90,93,96,99,102,105],"span",{"class":76,"line":77},"line",1,[74,79,81],{"class":80},"s7zQu","import",[74,83,85],{"class":84},"sMK4o"," {",[74,87,89],{"class":88},"sTEyZ"," PichaUpload",[74,91,92],{"class":84}," }",[74,94,95],{"class":80}," from",[74,97,98],{"class":84}," '",[74,100,57],{"class":101},"sfazB",[74,103,104],{"class":84},"'",[74,106,107],{"class":84},";\n",[74,109,111],{"class":76,"line":110},2,[74,112,114],{"emptyLinePlaceholder":113},true,"\n",[74,116,118,121,124,128,132,135],{"class":76,"line":117},3,[74,119,120],{"class":80},"export",[74,122,123],{"class":80}," default",[74,125,127],{"class":126},"spNyl"," function",[74,129,131],{"class":130},"s2Zo4"," MyPage",[74,133,134],{"class":84},"()",[74,136,137],{"class":84}," {\n",[74,139,141,144,147,150,153,157,160,163],{"class":76,"line":140},4,[74,142,143],{"class":126},"  const",[74,145,146],{"class":88}," handleSuccess",[74,148,149],{"class":84}," =",[74,151,152],{"class":84}," (",[74,154,156],{"class":155},"sHdIc","res",[74,158,159],{"class":84},")",[74,161,162],{"class":126}," =>",[74,164,137],{"class":84},[74,166,168,171,174,177,181,183,186,188,191,194,196,199,201],{"class":76,"line":167},5,[74,169,170],{"class":88},"    console",[74,172,173],{"class":84},".",[74,175,176],{"class":130},"log",[74,178,180],{"class":179},"swJcz","(",[74,182,104],{"class":84},[74,184,185],{"class":101},"Upload complete:",[74,187,104],{"class":84},[74,189,190],{"class":84},",",[74,192,193],{"class":88}," res",[74,195,173],{"class":84},[74,197,198],{"class":88},"id",[74,200,159],{"class":179},[74,202,107],{"class":84},[74,204,206],{"class":76,"line":205},6,[74,207,208],{"class":84},"  };\n",[74,210,212],{"class":76,"line":211},7,[74,213,114],{"emptyLinePlaceholder":113},[74,215,217,220],{"class":76,"line":216},8,[74,218,219],{"class":80},"  return",[74,221,222],{"class":179}," (\n",[74,224,226,229],{"class":76,"line":225},9,[74,227,228],{"class":84},"    \u003C",[74,230,232],{"class":231},"sBMFI","PichaUpload\n",[74,234,236,239,242,245,248],{"class":76,"line":235},10,[74,237,238],{"class":126},"      apiKey",[74,240,241],{"class":84},"=",[74,243,244],{"class":84},"\"",[74,246,247],{"class":101},"sk_live_...",[74,249,250],{"class":84},"\"\n",[74,252,254,257,260,263],{"class":76,"line":253},11,[74,255,256],{"class":126},"      onSuccess",[74,258,259],{"class":84},"={",[74,261,262],{"class":88},"handleSuccess",[74,264,265],{"class":84},"}\n",[74,267,269,272,274,276,279],{"class":76,"line":268},12,[74,270,271],{"class":126},"      className",[74,273,241],{"class":84},[74,275,244],{"class":84},[74,277,278],{"class":101},"my-custom-dropzone",[74,280,250],{"class":84},[74,282,284],{"class":76,"line":283},13,[74,285,286],{"class":84},"    \u002F>\n",[74,288,290,293],{"class":76,"line":289},14,[74,291,292],{"class":179},"  )",[74,294,107],{"class":84},[74,296,298],{"class":76,"line":297},15,[74,299,265],{"class":84},[60,301,303],{"id":302},"props","Props",[305,306,307,326],"table",{},[308,309,310],"thead",{},[311,312,313,317,320,323],"tr",{},[314,315,316],"th",{},"Prop",[314,318,319],{},"Type",[314,321,322],{},"Default",[314,324,325],{},"Description",[327,328,329,351,369,385],"tbody",{},[311,330,331,337,342,348],{},[332,333,334],"td",{},[55,335,336],{},"apiKey",[332,338,339],{},[55,340,341],{},"string",[332,343,344],{},[345,346,347],"strong",{},"Required",[332,349,350],{},"Your PichaFlow Secret Key.",[311,352,353,358,363,366],{},[332,354,355],{},[55,356,357],{},"onSuccess",[332,359,360],{},[55,361,362],{},"function",[332,364,365],{},"-",[332,367,368],{},"Callback for successful uploads.",[311,370,371,376,380,382],{},[332,372,373],{},[55,374,375],{},"onError",[332,377,378],{},[55,379,362],{},[332,381,365],{},[332,383,384],{},"Callback for failed uploads.",[311,386,387,392,396,398],{},[332,388,389],{},[55,390,391],{},"onProgress",[332,393,394],{},[55,395,362],{},[332,397,365],{},[332,399,400],{},"Callback for progress updates.",[402,403,404],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":110,"depth":110,"links":406},[407,408],{"id":62,"depth":110,"text":63},{"id":302,"depth":110,"text":303},"Integrate PichaFlow into your React and Next.js applications.","md",null,{},{"title":34,"description":409},"NRBTnSbuCpIcIVnVbhQzyaBgPruKTpfD99Jod-lMl5M",[416,418],{"title":30,"path":31,"stem":32,"description":417,"children":-1},"Integrate PichaFlow into your Qwik applications with fine-grained reactivity.",{"title":38,"path":39,"stem":40,"description":419,"children":-1},"Integrate PichaFlow into your Svelte and SvelteKit applications with ease.",1778549837462]