1"use strict";(self.webpackChunkink_docs=self.webpackChunkink_docs||[]).push([[3300],{9150:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/frontend-0b8f265f639b050d9e9a516ad52faa60.svg"},65404:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>a});var i=t(36672);const s={},r=i.createContext(s);function c(e){const n=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),i.createElement(r.Provider,{value:n},e.children)}},76933:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>c,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"integrations-and-sdks/javascript-typescript/react","title":"React Ecosystem","description":"Frontend Title Picture","source":"@site/docs/integrations-and-sdks/javascript-typescript/react.md","sourceDirName":"integrations-and-sdks/javascript-typescript","slug":"/integrations-and-sdks/javascript-typescript/react","permalink":"/docs/v6/integrations-and-sdks/javascript-typescript/react","draft":false,"unlisted":false,"editUrl":"https://github.com/use-ink/ink-docs/edit/master/docs/integrations-and-sdks/javascript-typescript/react.md","tags":[],"version":"current","frontMatter":{"title":"React Ecosystem","slug":"/integrations-and-sdks/javascript-typescript/react","hide_title":true},"sidebar":"reference","previous":{"title":"Core Libraries","permalink":"/docs/v6/integrations-and-sdks/javascript-typescript/core-libraries"},"next":{"title":"Other Languages","permalink":"/docs/v6/integrations-and-sdks/other-languages"}}');var s=t(23420),r=t(65404);const c={title:"React Ecosystem",slug:"/integrations-and-sdks/javascript-typescript/react",hide_title:!0},a="React Ecosystem",l={},o=[{value:"React Hooks and Libraries",id:"react-hooks-and-libraries",level:2},{value:"ReactiveDOT",id:"reactivedot",level:3},{value:"useInkathon",id:"useinkathon",level:3},{value:"typink",id:"typink",level:3},{value:"Full-Stack Templates",id:"full-stack-templates",level:2},{value:"inkathon",id:"inkathon",level:3}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"Frontend Title Picture",src:t(9150).A+"",width:"1600",height:"500"})}),"\n",(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"react-ecosystem",children:"React Ecosystem"})}),"\n",(0,s.jsx)(n.p,{children:"React is one of the most popular frontend frameworks for building web applications. Here are the tools and libraries specifically designed for building ink! smart contract frontends with React."}),"\n",(0,s.jsx)(n.h2,{id:"react-hooks-and-libraries",children:"React Hooks and Libraries"}),"\n",(0,s.jsx)(n.h3,{id:"reactivedot",children:"ReactiveDOT"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:(0,s.jsx)(n.a,{href:"https://reactivedot.dev/",children:(0,s.jsx)(n.code,{children:"ReactiveDOT"})})})," ",(0,s.jsx)(n.strong,{children:"(Compatible with ink! v6)"})]}),"\n",(0,s.jsx)(n.li,{children:"A reactive library for building Substrate front-ends"}),"\n",(0,s.jsx)(n.li,{children:"Modern approach to state management for blockchain applications"}),"\n",(0,s.jsx)(n.li,{children:"Built with TypeScript and excellent developer experience"}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"useinkathon",children:"useInkathon"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:(0,s.jsx)(n.a,{href:"https://github.com/scio-labs/use-inkathon",children:(0,s.jsx)(n.code,{children:"useInkathon"})})})," ",(0,s.jsx)(n.strong,{children:"(not compatible with ink! v6)"})]}),"\n",(0,s.jsx)(n.li,{children:"Hooks library for React with focus on smart-contract interactions"}),"\n",(0,s.jsxs)(n.li,{children:["Built using ",(0,s.jsx)(n.code,{children:"@polkadot/api"})," & ",(0,s.jsx)(n.code,{children:"@polkadot/api-contract"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Note"}),": Currently not updated for ink! v6 - consider alternatives for new projects"]}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"typink",children:"typink"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:(0,s.jsx)(n.a,{href:"https://docs.dedot.dev/typink",children:(0,s.jsx)(n.code,{children:"typink"})})})," ",(0,s.jsx)(n.strong,{children:"(Compatible with ink! v6)"})]}),"\n",(0,s.jsx)(n.li,{children:"Comprehensive toolkit designed to simplify and accelerate ink! dApp development"}),"\n",(0,s.jsxs)(n.li,{children:["Features:","\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Fully type-safe React hooks for smart contract interactions"}),"\n",(0,s.jsx)(n.li,{children:"Built-in CLI for bootstrapping projects"}
1),"\n",(0,s.jsx)(n.li,{children:"Multi-chain support"}),"\n",(0,s.jsx)(n.li,{children:"Flexible wallet connector options"}),"\n",(0,s.jsx)(n.li,{children:"Seamless developer experience"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"full-stack-templates",children:"Full-Stack Templates"}),"\n",(0,s.jsx)(n.h3,{id:"inkathon",children:"inkathon"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:(0,s.jsx)(n.a,{href:"https://github.com/scio-labs/inkathon",children:(0,s.jsx)(n.code,{children:"inkathon"})})})," ",(0,s.jsx)(n.strong,{children:"(will be compatible with ink! v6 soon)"})]}),"\n",(0,s.jsx)(n.li,{children:"Full-stack web app template using Next.js"}),"\n",(0,s.jsxs)(n.li,{children:["Built on top of ",(0,s.jsx)(n.code,{children:"useInkathon"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Features"}),":","\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Complete project setup with best practices"}),"\n",(0,s.jsx)(n.li,{children:"Pre-configured development environment"}),"\n",(0,s.jsx)(n.li,{children:"Smart contract integration examples"}),"\n",(0,s.jsx)(n.li,{children:"Modern UI components and styling"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"The fastest way to get up and running with a smart contract and corresponding web app."})})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.