# @thirdweb-dev/react > thirdweb React SDK Latest version **4.9.4** (published 2024-06-18) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @thirdweb-dev/react pnpm add @thirdweb-dev/react yarn add @thirdweb-dev/react bun add @thirdweb-dev/react ``` ## Health **Score 40/100 (D)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high maintenance score. Warnings: low downloads. Negative: abandoned. ## Facts | | | |---|---| | Version | 4.9.4 | | Published | 2024-06-18 | | First published | 2022-02-16 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=18 | | Dependencies | 25 | | Unpacked size | 3.7 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 639 | | Author | thirdweb eng | | Maintainers | thirdweb-bot, furqantw, yash90, jakeloo, joaquim-verges, jnsdls | ## Links - npm: https://www.npmjs.com/package/@thirdweb-dev/react - Repository: https://github.com/thirdweb-dev/js.git#main - Homepage: https://github.com/thirdweb-dev/js/tree/main#readme - Issues: https://github.com/thirdweb-dev/js/issues - npm.io page: https://npm.io/package/@thirdweb-dev/react ## Dependencies (25) - [buffer](https://npm.io/package/buffer.md) ^6.0.3 - [qrcode](https://npm.io/package/qrcode.md) ^1.5.3 - [fuse.js](https://npm.io/package/fuse.js.md) ^7.0.0 - [input-otp](https://npm.io/package/input-otp.md) ^1.2.4 - [@emotion/css](https://npm.io/package/@emotion/css.md) 11.10.5 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.4 - [detect-browser](https://npm.io/package/detect-browser.md) ^5.3.0 - [tiny-invariant](https://npm.io/package/tiny-invariant.md) ^1.3.3 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) 11.11.0 - [@radix-ui/colors](https://npm.io/package/@radix-ui/colors.md) ^0.1.9 - [@headlessui/react](https://npm.io/package/@headlessui/react.md) 1.7.18 - [@thirdweb-dev/sdk](https://npm.io/package/@thirdweb-dev/sdk.md) 4.0.99 - [copy-to-clipboard](https://npm.io/package/copy-to-clipboard.md) ^3.3.3 - [@google/model-viewer](https://npm.io/package/@google/model-viewer.md) ^2.1.1 - [@radix-ui/react-tabs](https://npm.io/package/@radix-ui/react-tabs.md) ^1.0.4 - [@thirdweb-dev/chains](https://npm.io/package/@thirdweb-dev/chains.md) 0.1.120 - [@radix-ui/react-icons](https://npm.io/package/@radix-ui/react-icons.md) ^1.3.0 - [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^4.36.1 - [@thirdweb-dev/wallets](https://npm.io/package/@thirdweb-dev/wallets.md) 2.5.39 - [@radix-ui/react-dialog](https://npm.io/package/@radix-ui/react-dialog.md) ^1.0.5 - [@thirdweb-dev/payments](https://npm.io/package/@thirdweb-dev/payments.md) 1.0.5 - [@radix-ui/react-popover](https://npm.io/package/@radix-ui/react-popover.md) ^1.0.7 - [@radix-ui/react-tooltip](https://npm.io/package/@radix-ui/react-tooltip.md) ^1.0.7 - [@thirdweb-dev/react-core](https://npm.io/package/@thirdweb-dev/react-core.md) 4.9.4 - [@radix-ui/react-focus-scope](https://npm.io/package/@radix-ui/react-focus-scope.md) ^1.0.4 ## Recent versions - 4.9.4 (latest) — 2024-06-18 - 0.0.0-dev-1c2accbe8cec23475bb42819a91e6bb01005e2be-20240618051424 (dev) — 2024-06-18 - 4.9.4-nightly-c13ffc5f8bbf88998a9bf96730a85ba1713f761a-20240618004239 (nightly) — 2024-06-18 - 4.4.10-alpha-4a03d61dd0a5216a1217ff078ab762920d25d6d0-20240402021246 (alpha) — 2024-04-02 - 4.4.21-beta-e0fc73388320fc7bb178beddd489aef9853a280c-20240320050555 (beta) — 2024-03-20 - 4.0.0-next-7abd58d8-20231009190306 (next) — 2023-10-09 - 3.0.0-pr19-9e6a4dc (pr19) — 2022-09-03 - 4.9.4-nightly-b5394b54719de423aeb229cf5355ae18545bc847-20240618003432 — 2024-06-18 - 4.9.4-nightly-b80865280585548615e4741634ea6b884a16e2cf-20240618001845 — 2024-06-18 - 4.9.4-nightly-c42a34f20246b83f6c4c8afbabd3499bebfc0d5d-20240618000540 — 2024-06-18 - 4.9.4-nightly-9dd1b5a5ebaeaecafdcacbb4f4b81c3006d5074c-20240617234821 — 2024-06-17 - 0.0.0-dev-56c1d76204cd0b491842ce68f8b6dbd472061da3-20240617223328 — 2024-06-17 - 4.9.3 — 2024-06-17 - 4.9.3-nightly-7304c5b0c7060080f302160dc9b24b2becc17524-20240617215131 — 2024-06-17 - 4.9.3-nightly-49cfdb3fd9079c984851f889ba8d6b8204cc8a35-20240617205545 — 2024-06-17 - … 4190 more at https://npm.io/package/@thirdweb-dev/react/versions ## README



thirdweb React SDK

npm version Build Status Join our Discord!

Ultimate collection of React hooks for your web3 apps



## Installation The easiest way to get started with the React SDK is to use the CLI: ```sh npx thirdweb create --app ``` Alternatively, you can install the SDK into your existing project using npm or yarn: ```sh npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers@5 ``` ```sh yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers@5 ```
## Getting Started Our SDK uses a [Provider Pattern](https://flexiple.com/react/provider-pattern-with-react-context-api/); meaning any component within the `ThirdwebProvider` will have access to the SDK. If you use the CLI to initialize your project, this is already set up for you. Let's take a look at a typical setup:
### Configure the `ThirdwebProvider` Specify the network your smart contracts are deployed to in the `desiredChainId` prop and wrap your application like so: ```jsx title="App.jsx" import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react"; const App = () => { return ( ); }; ``` Below are examples of where to set this up in your application:

Create React App • Next.js • Vite


### Connect to a User's Wallet Now the provider is set up, we can use all of the hooks and UI components available in the SDK, such as the [ConnectWallet](https://portal.thirdweb.com/ui-components/connectwalletbutton) component. Once the user has connected their wallet, all the calls we make to interact with contracts using the SDK will be on behalf of the user. ```jsx title="ConnectMetamaskButton.jsx" import { ConnectWallet, useAddress } from "@thirdweb-dev/react"; export const YourApp = () => { const address = useAddress(); return (
); }; ``` The `ConnectWallet` component handles everything for us, including switching networks, accounts, displaying balances and more. We can then get the connected address using the `useAddress` hook anywhere in the app.
### Interact With Contracts Connect to your smart contract using the [`useContract`](https://portal.thirdweb.com/sdk/interacting-with-contracts/custom-contracts/getting-a-contract#connect-to-a-contract) hook like so: ```jsx title="pages/index.jsx" import { useContract } from "@thirdweb-dev/react"; export default function Home() { const { contract } = useContract(""); // Now you can use the contract in the rest of the component! } ``` You can then use [`useContractRead`](https://portal.thirdweb.com/sdk/interacting-with-contracts/custom-contracts/using-contracts) and [`useContractWrite`](https://portal.thirdweb.com/sdk/interacting-with-contracts/custom-contracts/using-contracts) to read data and write transactions to the contract. You pass the `contract` object returned from `useContract` to these hooks as the first parameter and the name of the function (or view/mapping, etc.) on your smart contract as the second parameter. If your function requires parameters, you can pass them as additional arguments. For example, we can read the `name` of our contract like so: ```jsx title="pages/index.jsx" import { useContract, useContractRead, useContractWrite, } from "@thirdweb-dev/react"; export default function Home() { const { contract } = useContract(""); const { data: name, isLoading: loadingName } = useContractRead( contract, "name", // The name of the view/mapping/variable on your contract ); const { mutate: setName, isLoading: settingName } = useContractWrite( contract, "setName", // The name of the function on your contract ); } ```
### Using Extensions Each [extension](https://portal.thirdweb.com/extensions) you implement in your smart contract unlocks new functionality in the SDK. These hooks make it easy to interact with your smart contracts by implementing the complex logic for you under the hood. For example, if your smart contract implements [ERC721Supply](https://portal.thirdweb.com/solidity/extensions/erc721supply), you unlock the ability to [view all NFTs](https://portal.thirdweb.com/sdk/interacting-with-contracts/erc721supply#get-all-minted-nfts) on that contract using the SDK; which fetches all of your NFT metadata and the current owner of each NFT in parallel. In the React SDK, that is available using `useNFTs`: ```jsx import { useContract, useNFTs } from "@thirdweb-dev/react"; export default function Home() { const { contract } = useContract(""); const { data: nfts, isLoading: isReadingNfts } = useNFTs(contract); } ``` If we want to mint an NFT and our contract implements [ERC721Mintable](https://portal.thirdweb.com/solidity/extensions/erc721mintable), we can use the [`useMintNFT`](https://portal.thirdweb.com/sdk/interacting-with-contracts/erc721mintable) hook to mint an NFT from the connected wallet; handling all of the logic of uploading and pinning the metadata to IPFS for us behind the scenes. ```jsx import { useContract, useNFTs, useMintNFT } from "@thirdweb-dev/react"; export default function Home() { const { contract } = useContract(""); const { data: nfts, isLoading: isReadingNfts } = useNFTs(contract); const { mutate: mintNFT, isLoading: isMintingNFT } = useMintNFT(contract); } ```
### UI Components The SDK provides many UI components to help you build your application. For example, we can render each of the NFTs using the [`NFT Media Renderer`](https://portal.thirdweb.com/ui-components/nft-renderer) component, making use of the loading state from `useNFTs`: ```jsx title="pages/index.jsx" import { useContract, useNFTs, ThirdwebNftMedia } from "@thirdweb-dev/react"; export default function Home() { const { contract } = useContract(""); const { data: nfts, isLoading: isReadingNfts } = useNFTs(contract); return (

My NFTs

{isReadingNfts ? (

Loading...

) : (
{nfts.map((nft) => ( ))}
)}
); } ``` The [`Web3Button`](https://portal.thirdweb.com/ui-components/web3button) component ensures the user has connected their wallet and is currently configured to the same network as your smart contract before calling the function. It also has access to the `contract` directly, allowing you to perform any action on your smart contract when the button is clicked. For example, we can mint an NFT like so: ```jsx title="pages/index.jsx" import { useContract, useNFTs, ThirdwebNftMedia, Web3Button, } from "@thirdweb-dev/react"; const contractAddress = ""; export default function Home() { const { contract } = useContract(contractAddress); const { data: nfts, isLoading: isReadingNfts } = useNFTs(contract); return (
{/* ... Existing Display Logic here ... */} contract.erc721.mint({ name: "Hello world!", image: // You can use a file or URL here! "ipfs://QmZbovNXznTHpYn2oqgCFQYP4ZCpKDquenv5rFCX8irseo/0.png", }) } > Mint NFT
); } ```
## Advanced Configuration The `ThirdwebProvider` offers a number of configuration options to control the behavior of the React and Typescript SDK. These are all the configuration options of the ``. We provide defaults for all of these, but you customize them to suit your needs. ```jsx title="App.jsx" import { ChainId, IpfsStorage, ThirdwebProvider } from "@thirdweb-dev/react"; const KitchenSinkExample = () => { return ( ); }; ``` ## Available hooks ### Main hooks | Hook | Description | | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- | | [`useSDK`](https://portal.thirdweb.com/react/react.usesdk) | Access the instance of the thirdweb SDK created by the ThirdwebProvider. | | [`useContract`](https://portal.thirdweb.com/react/react.usecontract) | Use this resolve a contract address to a smart contract instance. | | [`useContractWrite`](https://portal.thirdweb.com/react/react.usecontractwrite) | Use this to get data from a contract read-function call. | | [`useContractRead`](https://portal.thirdweb.com/react/react.usecontractread) | Use this to get a function to make a write call to your contract. | | [`useContractEvents`](https://portal.thirdweb.com/react/react.usecontractevents) | Use this to get the contract metadata for a (built-in or custom) contract. | | [`useContractMetadata`](https://portal.thirdweb.com/react/react.usecontractmetadata) | Use this to get the contract metadata for a (built-in or custom) contract. | ### Wallet connection | Hook | Description | | -------------------------------------------------------------------------------- | ----------------------------------------------------------- | | [`useAddress`](https://portal.thirdweb.com/react/react.useaddress) | Hook for accessing the address of the connected wallet. | | [`useMetamask`](https://portal.thirdweb.com/react/react.usemetamask) | Hook for connecting to a Metamask wallet. | | [`useWalletConnect`](https://portal.thirdweb.com/react/react.usewalletconnect) | Hook for connecting to a mobile wallet with Wallet Connect. | | [`useCoinbaseWallet`](https://portal.thirdweb.com/react/react.usecoinbasewallet) | Hook for connecting to a Coinbase wallet. | | [`useMagic`](https://portal.thirdweb.com/react/react.usemagic) | Hook for connecting to an email wallet using magic link. | | [`useGnosis`](https://portal.thirdweb.com/react/react.usegnosis) | Hook for connecting to a Gnosis Safe. | | [`useDisconnect`](https://portal.thirdweb.com/react/react.usedisconnect) | Hook for disconnecting the currently connected wallet. | ### Network connection | Hook | Description | | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | [`useChainId`](https://portal.thirdweb.com/react/react.usechainid) | Hook for accessing the chain ID of the network the current wallet is connected to | | [`useNetwork`](https://portal.thirdweb.com/react/react.usenetwork) | Hook for getting metadata about the network the current wallet is connected to and switching networks. | | [`useNetworkMismatch`](https://portal.thirdweb.com/react/react.usenetworkmismatch) | Hook for checking whether the connected wallet is on the correct network specified by the desiredChainId passed to the . | ### NFT | Hook | Description | | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | | [`useNFT`](https://portal.thirdweb.com/react/react.usenft) | Use this to get an individual NFT token of your NFTContract. | | [`useNFTs`](https://portal.thirdweb.com/react/react.usenfts) | Use this to get a list of NFT tokens of your NFTContract. | | [`useTotalCirculatingSupply`](https://portal.thirdweb.com/react/react.usetotalcirculatingsupply) | Use this to get a the total (minted) supply of your NFTContract. | | [`useOwnedNFTs`](https://portal.thirdweb.com/react/react.useownednfts) | Use this to get a the owned NFTs for a specific Erc721OrErc1155 and wallet address. | | [`useNFTBalance`](https://portal.thirdweb.com/react/react.usenftbalance) | Use this to get a the total balance of a NFTContract and wallet address. | | [`useTotalCount`](https://portal.thirdweb.com/react/react.usetotalcount) | Use this to get the total count of NFT tokens of your NFTContract. | | [`useMintNFT`](https://portal.thirdweb.com/react/react.usemintnft) | Use this to mint a new NFT on your Erc721OrErc1155. | | [`useMintNFTSupply`](https://portal.thirdweb.com/react/react.usemintnftsupply) | Use this mint extra supply on your Erc1155. | | [`useTransferNFT`](https://portal.thirdweb.com/react/react.usetransfernft) | Use this to transfer tokens on your NFTContract. | | [`useAirdropNFT`](https://portal.thirdweb.com/react/react.useairdropnft) | Use this to airdrop tokens on your Erc1155. | | [`useBurnNFT`](https://portal.thirdweb.com/react/react.useburnnft) | Use this to burn an NFT on your Erc721OrErc1155. | ### Token | Hook | Description | | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | | [`useTokenSupply`](https://portal.thirdweb.com/react/react.usetokensupply) | Use this to get a the total supply of your contract. | | [`useTokenBalance`](https://portal.thirdweb.com/react/react.usetokenbalance) | Use this to get the balance of your contract for a given address. | | [`useTokenDecimals`](https://portal.thirdweb.com/react/react.usetokendecimals) | Use this to get the decimals of your contract for a given address. | | [`useMintToken`](https://portal.thirdweb.com/react/react.useminttoken) | Use this to mint new tokens on your contract. | | [`useClaimToken`](https://portal.thirdweb.com/react/react.useclaimtoken) | Use this to claim tokens from your contract. | | [`useTransferToken`](https://portal.thirdweb.com/react/react.usetransfertoken) | Use this to transfer tokens on your contract. | | [`useTransferBatchToken`](https://portal.thirdweb.com/react/react.usetransferbatchtoken) | Use this to transfer batch tokens on your contract. | | [`useBurnToken`](https://portal.thirdweb.com/react/react.useburntoken) | Use this to burn tokens on your contract. | ### Marketplace | Hook | Description | | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | [`useListing`](https://portal.thirdweb.com/react/react.uselisting) | Use this to get a specific listing from the marketplace. | | [`useListings`](https://portal.thirdweb.com/react/react.uselistings) | Use this to get a list all listings from your marketplace contract. | | [`useListingsCount`](https://portal.thirdweb.com/react/react.uselistingscount) | Use this to get a count of all listings on your marketplace contract. | | [`useActiveListings`](https://portal.thirdweb.com/react/react.useactivelistings) | Use this to get a list active listings from your marketplace contract. | | [`useWinningBid`](https://portal.thirdweb.com/react/react.usewinningbid) | Use this to get a the winning bid for an auction listing from your marketplace contract. | | [`useAuctionWinner`](https://portal.thirdweb.com/react/react.useauctionwinner) | Use this to get the winner of an auction listing from your marketplace contract. | | [`useBidBuffer`](https://portal.thirdweb.com/react/react.usebidbuffer) | Use this to get the buffer in basis points between offers from your marketplace contract. | | [`useCreateDirectListing`](https://portal.thirdweb.com/react/react.usecreatedirectlisting) | Use this to create a new Direct Listing on your marketplace contract. | | [`useCreateAuctionListing`](https://portal.thirdweb.com/react/react.usecreateauctionlisting) | Use this to create a new Auction Listing on your marketplace contract. | | [`useCancelListing`](https://portal.thirdweb.com/react/react.usecancellisting) | Use this to cancel a listing on your marketplace contract. | | [`useMakeBid`](https://portal.thirdweb.com/react/react.usemakebid) | Use this to place a bid on an auction listing from your marketplace contract. | | [`useBuyNow`](https://portal.thirdweb.com/react/react.usebuynow) | Use this to buy out an auction listing from your marketplace contract. | | [`useBuyDirectListing`](https://portal.thirdweb.com/react/react.useBuyDirectListing) | Use this to buy from a direct listing in your marketplace v3 contract. | ### Permissions Controls | Hook | Description | | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | [`useAllRoleMembers`](https://portal.thirdweb.com/react/react.useallrolemembers) | Use this to get the roles of all members. | | [`useRoleMembers`](https://portal.thirdweb.com/react/react.userolemembers) | Use this to get the members of a role. | | [`useIsAddressRole`](https://portal.thirdweb.com/react/react.useisaddressrole) | Use this to check if a WalletAddress is a member of a role. | | [`useSetAllRoleMembers`](https://portal.thirdweb.com/react/react.usesetallrolemembers) | Use this to OVERWRITE the list of addresses that are members of specific roles. | | [`useGrantRole`](https://portal.thirdweb.com/react/react.usegrantrole) | Use this to grant a WalletAddress a specific role. | | [`useRevokeRole`](https://portal.thirdweb.com/react/react.userevokerole) | Use this to revoke a WalletAddress a specific role. | ### Drop | Hook | Description | | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | | [`useUnclaimedNFTs`](https://portal.thirdweb.com/react/react.useunclaimednfts) | Use this to get a list of unclaimed NFT tokens of your ERC721 Drop contract. | | [`useClaimedNFTs`](https://portal.thirdweb.com/react/react.useclaimednfts) | Use this to get a list of claimed (minted) NFT tokens of your ERC721 Drop contract.. | | [`useUnclaimedNFTSupply`](https://portal.thirdweb.com/react/react.useunclaimednftsupply) | Use this to get the total unclaimed NFT supply of your ERC721 Drop contract. | | [`useClaimedNFTSupply`](https://portal.thirdweb.com/react/react.useclaimednftsupply) | Use this to get the total claimed (minted) NFT supply of your ERC721 Drop contract. | | [`useBatchesToReveal`](https://portal.thirdweb.com/react/react.usebatchestoreveal) | Use this to get a list of batches that are ready to be revealed. | | [`useClaimNFT`](https://portal.thirdweb.com/react/react.useclaimnft) | Use this to claim a NFT on your DropContract | | [`useLazyMint`](https://portal.thirdweb.com/react/react.uselazymint) | Use this to lazy mint a batch of NFTs on your DropContract. | | [`useDelayedRevealLazyMint`](https://portal.thirdweb.com/react/react.usedelayedreveallazymint) | Use this to lazy mint a batch of delayed reveal NFTs on your DropContract. | | [`useRevealLazyMint`](https://portal.thirdweb.com/react/react.usereveallazymint) | Use this to reveal a batch of delayed reveal NFTs on your RevealableContract. | ### Claim Conditions | Hook | Description | | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | | [`useActiveClaimCondition`](https://portal.thirdweb.com/react/react.useactiveclaimcondition) | Use this to get the active claim condition for ERC20, ERC721 or ERC1155 based contracts. | | [`useClaimConditions`](https://portal.thirdweb.com/react/react.useclaimconditions) | Use this to get all claim conditions for ERC20, ERC721 or ERC1155 based contracts. | | [`useClaimIneligibilityReasons`](https://portal.thirdweb.com/react/react.useclaimineligibilityreasons) | Use this to check for reasons that prevent claiming for either ERC20, ERC721 or ERC1155 based contracts. | | [`useSetClaimConditions`](https://portal.thirdweb.com/react/react.usesetclaimconditions) | Use this to set claim conditions on your DropContract. | | [`useResetClaimConditions`](https://portal.thirdweb.com/react/react.useresetclaimconditions) | Use this to reset claim conditions on your DropContract. | --- _Source: https://npm.io/package/@thirdweb-dev/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._