[{"data":1,"prerenderedAt":424},["ShallowReactive",2],{"navigation_docs":3,"-frameworks-react":49,"-frameworks-react-surround":419},[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":413,"extension":414,"links":415,"meta":416,"navigation":117,"path":39,"seo":417,"stem":40,"__hash__":418},"docs\u002Fframeworks\u002Freact.md",{"type":52,"value":53,"toc":409},"minimark",[54,63,68,304,308,405],[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=\"sk_live_...\"\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,270,285,291,299],{"__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},"sk_live_...",[78,253,254],{"class":88},"\"\n",[78,256,258,261,264,267],{"class":80,"line":257},11,[78,259,260],{"class":130},"      onSuccess",[78,262,263],{"class":88},"={",[78,265,266],{"class":92},"handleSuccess",[78,268,269],{"class":88},"}\n",[78,271,273,276,278,280,283],{"class":80,"line":272},12,[78,274,275],{"class":130},"      className",[78,277,245],{"class":88},[78,279,248],{"class":88},[78,281,282],{"class":105},"my-custom-dropzone",[78,284,254],{"class":88},[78,286,288],{"class":80,"line":287},13,[78,289,290],{"class":88},"    \u002F>\n",[78,292,294,297],{"class":80,"line":293},14,[78,295,296],{"class":183},"  )",[78,298,111],{"class":88},[78,300,302],{"class":80,"line":301},15,[78,303,269],{"class":88},[64,305,307],{"id":306},"props","Props",[309,310,311,330],"table",{},[312,313,314],"thead",{},[315,316,317,321,324,327],"tr",{},[318,319,320],"th",{},"Prop",[318,322,323],{},"Type",[318,325,326],{},"Default",[318,328,329],{},"Description",[331,332,333,355,373,389],"tbody",{},[315,334,335,341,346,352],{},[336,337,338],"td",{},[59,339,340],{},"apiKey",[336,342,343],{},[59,344,345],{},"string",[336,347,348],{},[349,350,351],"strong",{},"Required",[336,353,354],{},"Your PichaFlow Secret Key.",[315,356,357,362,367,370],{},[336,358,359],{},[59,360,361],{},"onSuccess",[336,363,364],{},[59,365,366],{},"function",[336,368,369],{},"-",[336,371,372],{},"Callback for successful uploads.",[315,374,375,380,384,386],{},[336,376,377],{},[59,378,379],{},"onError",[336,381,382],{},[59,383,366],{},[336,385,369],{},[336,387,388],{},"Callback for failed uploads.",[315,390,391,396,400,402],{},[336,392,393],{},[59,394,395],{},"onProgress",[336,397,398],{},[59,399,366],{},[336,401,369],{},[336,403,404],{},"Callback for progress updates.",[406,407,408],"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":74,"searchDepth":114,"depth":114,"links":410},[411,412],{"id":66,"depth":114,"text":67},{"id":306,"depth":114,"text":307},"Integrate PichaFlow into your React and Next.js applications.","md",null,{},{"title":38,"description":413},"NRBTnSbuCpIcIVnVbhQzyaBgPruKTpfD99Jod-lMl5M",[420,422],{"title":34,"path":35,"stem":36,"description":421,"children":-1},"Integrate PichaFlow into your Qwik applications with fine-grained reactivity.",{"title":42,"path":43,"stem":44,"description":423,"children":-1},"Integrate PichaFlow into your Svelte and SvelteKit applications with ease.",1778709549189]