{"_id":"@onflow/fcl-react","_rev":"28-4119dfd31a92a43a2033815f7537e0e2","name":"@onflow/fcl-react","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@onflow/fcl-react","version":"0.0.0","author":{"name":"Dapper Labs","email":"dev@dapperlabs.com"},"license":"Apache-2.0","_id":"@onflow/fcl-react@0.0.0","maintainers":[{"name":"turbolent_flow","email":"bastian@dapperlabs.com"},{"name":"psiemens","email":"peterjsiemens@gmail.com"},{"name":"mackenzie","email":"remember.mackenzie@gmail.com"},{"name":"harry.eth","email":"harry.xue.eth@gmail.com"},{"name":"qvvg","email":"npm@qv.vg"},{"name":"jeffreydoyle","email":"jeffreydoylec@gmail.com"},{"name":"dapper_labs","email":"billing@dapperlabs.com"},{"name":"derrickpelletier","email":"derrick@dpelletier.com"}],"homepage":"https://onflow.org","bugs":{"url":"https://github.com/onflow/flow-js-sdk/issues"},"dist":{"shasum":"9584fc2a4c7d6ce461e19b67b535280cf3aca960","tarball":"https://registry.npmjs.org/@onflow/fcl-react/-/fcl-react-0.0.0.tgz","fileCount":20,"integrity":"sha512-VgEfKDltG7+pUu/NRwW+vFwp4Q7N9V5a1NiL1tSJoeDgyXqpgItXYNEA1n+BGJ+mjGKQw0ip4X+815qXR4lryQ==","signatures":[{"sig":"MEUCIQD5FK+MzHaGFxI8pJ8euK+mYUoWRGzqY6pmpjCr8XZ19gIgRqHBaJVnq5JgDJVFySEcmVhgPg5dPpV7r5kcVNPlics=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuJypCRA9TVsSAnZWagAAhS0P/1sEvSAD8e+mw4F9SaEh\nVQDMIyqtzdCSRBTWY0S6UXW2COb8NBW7Bl8U1AM6MtaKoo8EtsfAQJ9r8E3W\nx7Elq0abokuKzDqbTbtVH3bZ3oQC7txdaryu0KplN03l9v6XAGQ3FednCof0\nhbp7k8UHOieXnFb2Hix3XeBixhFmp4bJ1gwc4g8jN/DWiNEssmG0+PlNFk8M\nGEfUgvRjC4mZNU09utuiQcgh60bleLx3fQ+S46jSRegXh/6HgrP3rSIb7Fyp\ni8VPTCpPRhAsPjq5hG+bihAdx43MiE8s3WJG9usC6jkKVf5LRgGXl+/KfrbU\ndPQPwbPp1wg2HwKV18fvPmcSFDhhZ+yG54CGi2lehJo0P5L3NIlvZ+Fqdszk\nbkh9sn79MWP5OQKcggqGHobWSe/n6AwYGWwhvpp891l6rqve2bK27Rek+C7s\npywnNuzd+rbPxIff6294dnch2BnoK3JaqMHcsqu5cgh6y/Adh5b/1B6kPWPO\nzQaxYwih50IU7kEhZnkV9vgZ8QKCwRJ7NYxGwV9YV47Rt12nr1wGUO6n6VIb\nBcnXHWe8SOa5BQlpK/XMbrNveX2pPzz6T3PNbGcPk/rti0sddU1YgC+BVA+H\nYz7sx1xRKahbE1IXtbwkHTGlCMEO01MJKHwNRp9x4E6lMXNt7Sim9+/s5fCz\nUU8k\r\n=TuYJ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"transform":{".js":"jest-esm-transformer"}},"main":"dist/fcl-react.js","unpkg":"dist/fcl-react.umd.js","module":"dist/fcl-react.module.js","source":"src/fcl-react.js","scripts":{"test":"jest","alpha":"npm publish --tag alpha","build":"microbundle","start":"microbundle watch","test:watch":"jest --watch","prepublishOnly":"npm install && npm test && npm run build"},"_npmUser":{"name":"qvvg","email":"npm@qv.vg"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+ssh://git@github.com/onflow/flow-js-sdk.git","type":"git"},"_npmVersion":"7.0.8","description":"React Tools for Flow Client Library","directories":{},"_nodeVersion":"15.2.1","_hasShrinkwrap":false,"devDependencies":{"jest":"26.4.2","microbundle":"0.12.4","jest-esm-transformer":"1.0.0"},"peerDependencies":{"react":"*","@onflow/fcl":"*"},"_npmOperationalInternal":{"tmp":"tmp/fcl-react_0.0.0_1605934249313_0.3689814245300689","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-11-21T04:50:49.312Z","modified":"2026-05-12T19:46:27.596Z","0.0.0":"2020-11-21T04:50:49.461Z"},"bugs":{"url":"https://github.com/onflow/flow-js-sdk/issues"},"author":{"name":"Dapper Labs","email":"dev@dapperlabs.com"},"license":"Apache-2.0","homepage":"https://onflow.org","repository":{"url":"git+ssh://git@github.com/onflow/flow-js-sdk.git","type":"git"},"description":"React Tools for Flow Client Library","maintainers":[{"email":"hannah.lee@dapperlabs.com","name":"han210"},{"email":"justin.barry@dapperlabs.com","name":"dapperj"},{"email":"billing@dapperlabs.com","name":"dapper_labs"},{"email":"jeffreydoylec@gmail.com","name":"jeffreydoyle"},{"email":"harry.xue.eth@gmail.com","name":"harry.eth"},{"email":"chaseefleming@gmail.com","name":"chasefleming"},{"email":"gregor.gololicic@dapperlabs.com","name":"gregorggg"},{"email":"bastian.mueller@flowfoundation.org","name":"turbolent_ff"},{"email":"jribbink@telus.net","name":"jribbink"},{"email":"kan.zhang@flowfoundation.com","name":"kan-flow-foundation"},{"email":"michael.fabozzi@flowfoundation.org","name":"michael_flow"},{"email":"hao.fu@flowfoundation.org","name":"lmcmze"}],"readme":"# @onflow/fcl-react\n\nHelpful FCL Hooks for React\n\n**IMPORTANT** This currently requires `npm install --save @onflow/fcl@alpha`\n\n## Install\n\n> Has two peer dependencies: `@onflow/fcl` and `react`\n\n```sh\nnpm install --save @onflow/fcl-react @onflow/fcl\n```\n\n## Usage\n\n```javascript\n// Exposes\n// - useCurrentUser\n// - useAccount\n// - useConfig\n// - useScript\n// - useTransaction\nimport {\n  useCurrentUser,\n  useAccount,\n  useConfig,\n  useScript,\n  useTransaction,\n} from \"@onflow/fcl-react\"\n```\n\n### useCurrentUser\n\nReturns the current user and a boolean saying if they are logged in or not.\n\n```javascript\nimport * as fcl from \"@onflow/fcl\"\nimport {useCurrentUser} from \"@onflow/fcl-react\"\n\nexport function Rawr() {\n  const [user, loggedIn] = useCurrentUser()\n\n  if (!loggedIn) {\n    return (\n      <div>\n        <button onClick={fcl.logIn}>Log In</button>\n        <button onClick={fcl.signUp}>Sign Up</button>\n      </div>\n    )\n  }\n\n  return (\n    <div>\n      <ul>\n        <li>Flow Address: {fcl.display(user.addr)}</li>\n        <li>Composite ID: {user.cid}</li>\n      </ul>\n      <button onClick={fcl.unauthenticate}>Log Out</button>\n      <button onClick={fcl.reauthenticate}>Change Account</button>\n    </div>\n  )\n}\n```\n\n### useAccount\n\nGiven an address, returns the accounts info.\n\n```javascript\nimport * as fcl from \"@onflow/fcl\"\nimport {useCurrentUser, useAccount, fmtFlow} from \"@onflow/fcl-react\"\n\nexport function Rawr() {\n  const [user] = useCurrentUser()\n  const [acct, refetchAcct] = useAccount(user.addr)\n\n  // prettier-ignore\n  if (acct == null) return <div>Loading Account...</div>\n\n  return (\n    <div>\n      <h3>General Info</h3>\n      <ul>\n        <li>Address: {fcl.display(acct.address)}</li>\n        <li>Balance: {fmtFlow(acct.balance)}</li>\n      </ul>\n      <h3>Keys</h3>\n      <ul>\n        {acct.keys.map(key => (\n          <li>\n            <pre key={key.index}>{JSON.stringify(key, null, 2)}</pre>\n          </li>\n        ))}\n      </ul>\n      <h3>Code</h3>\n      <pre>{acct.code}</pre>\n    </div>\n  )\n}\n```\n\n### useConfig\n\nReturns config values\n\n```javascript\nimport {useConfig} from \"@onflow/fcl-react\"\n\nexport function Rawr() {\n  const env = useConfig(\"env\")\n  const accessNode = useConfig(\"accessNode.api\")\n  const walletDiscovery = useConfig(\"challenge.handshake\")\n\n  return (\n    <ul>\n      <li>ENV: {env}</li>\n      <li>Access Node: {accessNode}</li>\n      <li>Wallet Discovery: {walletDiscovery}</li>\n    </ul>\n  )\n}\n```\n\n### useScript\n\nDefines a script, giving the component the ability to trigger the script and retrieve the result\n\n```javascript\nimport * as fcl from \"@onflow/fcl\"\nimport * as t from \"@onflow/types\"\nimport {useScript, useCurrentUser} from \"@onflow/fcl-react\"\nimport {useEffect, useCallback} from \"react\"\n\n// prettier-ignore\nfcl.config()\n  .put(\"env\", \"testnet\")\n  .put(\"0xProfile\", \"0x1d007d755706c469\")\n\nexport function Rawr() {\n  const [user] = useCurrentUser()\n  const [exec, profile] = useScript([\n    fcl.script`\n      import Profile from 0xProfile\n\n      pub fun main(address: Address): Profile.ReadOnly? {\n        return Profile.fetchProfile(address)\n      }\n    `\n  ])\n\n  // fetch the profile if there is a current user\n  useEffect(() => {\n    // prettier-ignore\n    if (user.addr) exec([\n      fcl.arg(user.addr, t.Address)\n    ])\n  }, [user.addr])\n\n  // fetch the profile as needed (if there is a current user)\n  const triggerScript = useCallback(() => {\n    // prettier-ignore\n    if (user.addr) exec([\n      fcl.arg(user.addr, t.Address)\n    ])\n  }, [user.addr])\n\n  // prettier-ignore\n  if (profile == null) return <div>Loading Profile...</div>\n\n  return <ul>\n    <li><button onClick={triggerScript}>Refresh Profile</button></li>\n    <li>Display Name: {profile.displayName}<li>\n    <li>Color: {profile.color}</li>\n    <li>Avatar: <img src={profile.avatar}/></li>\n  </ul>\n}\n```\n\n### useTransaction\n\nDefines a transaction, giving the component the ability to trigger the transaction and stay updated on its progress.\n\n```javascript\nimport * as fcl from \"@onflow/fcl\"\nimport * as t from \"@onflow/types\"\nimport {useTransaction, IDLE, SUCCESS} from \"@onflow/fcl-react\"\nimport {useState, useEffect} from \"react\"\n\n// prettier-ignore\nfcl.config()\n  .put(\"env\", \"testnet\")\n  .put(\"0xProfile\", \"0x1d007d755706c469\")\n\nexport function Rawr() {\n  const [exec, status, txStatus, details] = useTransaction([\n    fcl.transaction`\n      import Profile from 0xProfile\n\n      transaction(displayName: String) {\n        prepare(account: AuthAccount) {\n          account\n            .borrow<&{Profile.Owner}>(from: Profile.privatePath)\n            .setDisplayName(displayName)\n        }\n      }\n    `,\n  ])\n  const [displayName, setDisplayName] = useState(\"\")\n\n  const triggerTransaction = callback(() => {\n    // prettier-ignore\n    exec([\n      fcl.arg(displayName, t.String)\n    ])\n  }, [displayName])\n\n  useEffect(() => {\n    if (status === SUCCESS) setDisplayName(\"\")\n  }, [status])\n\n  return (\n    <div>\n      <input\n        value={displayName}\n        onChange={e => setDisplayName(e.target.value)}\n      />\n      {status === IDLE ? (\n        <button onClick={triggerTransaction}>Set DisplayName</button>\n      ) : (\n        <div>\n          {status} -- {txStatus}\n        </div>\n      )}\n      <pre>{JSON.stringify(details, null, 2)}</pre>\n    </div>\n  )\n}\n```\n","readmeFilename":"README.md"}