[{"data":1,"prerenderedAt":497},["ShallowReactive",2],{"navigation_docs":3,"-frameworks-react":49,"-frameworks-react-surround":492},[4,8,12,16,20,24,28],{"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},"Image Transformations","\u002Ftransformations","6.transformations",{"title":29,"path":30,"stem":31,"children":32},"Framework Components","\u002Fframeworks","frameworks",[33,37,41,45],{"title":34,"path":35,"stem":36},"Qwik","\u002Fframeworks\u002Fqwik","frameworks\u002Fqwik",{"title":38,"path":39,"stem":40},"React","\u002Fframeworks\u002Freact","frameworks\u002Freact",{"title":42,"path":43,"stem":44},"Svelte","\u002Fframeworks\u002Fsvelte","frameworks\u002Fsvelte",{"title":46,"path":47,"stem":48},"Vue","\u002Fframeworks\u002Fvue","frameworks\u002Fvue",{"id":50,"title":38,"body":51,"description":486,"extension":487,"links":488,"meta":489,"navigation":117,"path":39,"seo":490,"stem":40,"__hash__":491},"docs\u002Fframeworks\u002Freact.md",{"type":52,"value":53,"toc":482},"minimark",[54,63,68,333,337,478],[55,56,57,58,62],"p",{},"The ",[59,60,61],"code",{},"@pichaflow\u002Freact"," package provides a functional upload component.",[64,65,67],"h2",{"id":66},"usage","Usage",[69,70,75],"pre",{"className":71,"code":72,"language":73,"meta":74,"style":74},"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=\"pk_live_...\"\n      useSecure={true}\n      signatureUrl=\"\u002Fapi\u002Fmedia\u002Fv1\u002Fupload\u002Fsign\"\n      onSuccess={handleSuccess}\n      className=\"my-custom-dropzone\"\n    \u002F>\n  );\n}\n","jsx","",[59,76,77,112,119,142,169,207,213,218,227,237,255,271,286,299,314,320,328],{"__ignoreMap":74},[78,79,82,86,90,94,97,100,103,106,109],"span",{"class":80,"line":81},"line",1,[78,83,85],{"class":84},"s7zQu","import",[78,87,89],{"class":88},"sMK4o"," {",[78,91,93],{"class":92},"sTEyZ"," PichaUpload",[78,95,96],{"class":88}," }",[78,98,99],{"class":84}," from",[78,101,102],{"class":88}," '",[78,104,61],{"class":105},"sfazB",[78,107,108],{"class":88},"'",[78,110,111],{"class":88},";\n",[78,113,115],{"class":80,"line":114},2,[78,116,118],{"emptyLinePlaceholder":117},true,"\n",[78,120,122,125,128,132,136,139],{"class":80,"line":121},3,[78,123,124],{"class":84},"export",[78,126,127],{"class":84}," default",[78,129,131],{"class":130},"spNyl"," function",[78,133,135],{"class":134},"s2Zo4"," MyPage",[78,137,138],{"class":88},"()",[78,140,141],{"class":88}," {\n",[78,143,145,148,151,154,157,161,164,167],{"class":80,"line":144},4,[78,146,147],{"class":130},"  const",[78,149,150],{"class":92}," handleSuccess",[78,152,153],{"class":88}," =",[78,155,156],{"class":88}," (",[78,158,160],{"class":159},"sHdIc","res",[78,162,163],{"class":88},")",[78,165,166],{"class":130}," =>",[78,168,141],{"class":88},[78,170,172,175,178,181,185,187,190,192,195,198,200,203,205],{"class":80,"line":171},5,[78,173,174],{"class":92},"    console",[78,176,177],{"class":88},".",[78,179,180],{"class":134},"log",[78,182,184],{"class":183},"swJcz","(",[78,186,108],{"class":88},[78,188,189],{"class":105},"Upload complete:",[78,191,108],{"class":88},[78,193,194],{"class":88},",",[78,196,197],{"class":92}," res",[78,199,177],{"class":88},[78,201,202],{"class":92},"id",[78,204,163],{"class":183},[78,206,111],{"class":88},[78,208,210],{"class":80,"line":209},6,[78,211,212],{"class":88},"  };\n",[78,214,216],{"class":80,"line":215},7,[78,217,118],{"emptyLinePlaceholder":117},[78,219,221,224],{"class":80,"line":220},8,[78,222,223],{"class":84},"  return",[78,225,226],{"class":183}," (\n",[78,228,230,233],{"class":80,"line":229},9,[78,231,232],{"class":88},"    \u003C",[78,234,236],{"class":235},"sBMFI","PichaUpload\n",[78,238,240,243,246,249,252],{"class":80,"line":239},10,[78,241,242],{"class":130},"      apiKey",[78,244,245],{"class":88},"=",[78,247,248],{"class":88},"\"",[78,250,251],{"class":105},"pk_live_...",[78,253,254],{"class":88},"\"\n",[78,256,258,261,264,268],{"class":80,"line":257},11,[78,259,260],{"class":130},"      useSecure",[78,262,263],{"class":88},"={",[78,265,267],{"class":266},"sfNiH","true",[78,269,270],{"class":88},"}\n",[78,272,274,277,279,281,284],{"class":80,"line":273},12,[78,275,276],{"class":130},"      signatureUrl",[78,278,245],{"class":88},[78,280,248],{"class":88},[78,282,283],{"class":105},"\u002Fapi\u002Fmedia\u002Fv1\u002Fupload\u002Fsign",[78,285,254],{"class":88},[78,287,289,292,294,297],{"class":80,"line":288},13,[78,290,291],{"class":130},"      onSuccess",[78,293,263],{"class":88},[78,295,296],{"class":92},"handleSuccess",[78,298,270],{"class":88},[78,300,302,305,307,309,312],{"class":80,"line":301},14,[78,303,304],{"class":130},"      className",[78,306,245],{"class":88},[78,308,248],{"class":88},[78,310,311],{"class":105},"my-custom-dropzone",[78,313,254],{"class":88},[78,315,317],{"class":80,"line":316},15,[78,318,319],{"class":88},"    \u002F>\n",[78,321,323,326],{"class":80,"line":322},16,[78,324,325],{"class":183},"  )",[78,327,111],{"class":88},[78,329,331],{"class":80,"line":330},17,[78,332,270],{"class":88},[64,334,336],{"id":335},"props","Props",[338,339,340,359],"table",{},[341,342,343],"thead",{},[344,345,346,350,353,356],"tr",{},[347,348,349],"th",{},"Prop",[347,351,352],{},"Type",[347,354,355],{},"Default",[347,357,358],{},"Description",[360,361,362,387,407,429,446,462],"tbody",{},[344,363,364,370,375,381],{},[365,366,367],"td",{},[59,368,369],{},"apiKey",[365,371,372],{},[59,373,374],{},"string",[365,376,377],{},[378,379,380],"strong",{},"Required",[365,382,383,384,386],{},"Your PichaFlow Public Key (",[59,385,251],{},").",[344,388,389,394,399,404],{},[365,390,391],{},[59,392,393],{},"useSecure",[365,395,396],{},[59,397,398],{},"boolean",[365,400,401],{},[59,402,403],{},"false",[365,405,406],{},"Enable the HMAC-SHA256 handshake flow for secure browser uploads.",[344,408,409,414,418,423],{},[365,410,411],{},[59,412,413],{},"signatureUrl",[365,415,416],{},[59,417,374],{},[365,419,420],{},[59,421,422],{},"-",[365,424,425,426,428],{},"Your backend endpoint for signing the upload request (Required if ",[59,427,393],{}," is true).",[344,430,431,436,441,443],{},[365,432,433],{},[59,434,435],{},"onSuccess",[365,437,438],{},[59,439,440],{},"function",[365,442,422],{},[365,444,445],{},"Callback for successful uploads.",[344,447,448,453,457,459],{},[365,449,450],{},[59,451,452],{},"onError",[365,454,455],{},[59,456,440],{},[365,458,422],{},[365,460,461],{},"Callback for failed uploads.",[344,463,464,469,473,475],{},[365,465,466],{},[59,467,468],{},"onProgress",[365,470,471],{},[59,472,440],{},[365,474,422],{},[365,476,477],{},"Callback for progress updates.",[479,480,481],"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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":74,"searchDepth":114,"depth":114,"links":483},[484,485],{"id":66,"depth":114,"text":67},{"id":335,"depth":114,"text":336},"Integrate PichaFlow into your React and Next.js applications.","md",null,{},{"title":38,"description":486},"nHB1mXSKMtFHUoYGup8E0n-ou6exyU2CQC_aRPYQLBA",[493,495],{"title":34,"path":35,"stem":36,"description":494,"children":-1},"Integrate PichaFlow into your Qwik applications with fine-grained reactivity.",{"title":42,"path":43,"stem":44,"description":496,"children":-1},"Integrate PichaFlow into your Svelte and SvelteKit applications with ease.",1779934775330]