2.0.2-0 • Published 3 years ago

@thirdweb-dev/react v2.0.2-0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
3 years ago

Thirdweb react SDK

The thirdweb React SDK provides a collection of hooks to use in your React apps to interact with your thirdweb contracts.

This library doesn't come with any UI, only the logic parts. This allows you to use your own styles and components, without the hassle of managing the data flows yourself.

Quick start

We provide template repositories to help you get started with thirdweb quickly.

Starter Templates

All available templates.

Project Examples

coming soon

Installation

via NPM

npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers

via Yarn

yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers

Quick Start

1. Wrap your application in the Provider

At the top level of your application, add a ThirdwebProvider that will handle maintaining connection states and provide quick access to the thirdweb SDK.

import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";

const App = () => {
  return (
    <ThirdwebProvider desiredChainId={ChainId.Mainnet}>
      <YourApp />
    </ThirdwebProvider>
  );
};

2. Add a way for your users to connect your wallet somewhere in your app

We provide an easy way to handle wallet connections with a variety of dedicated connector hooks.

import { useAddress, useDisconnect, useMetamask } from "@thirdweb-dev/react";

export const ConnectMetamaskButtonComponent = () => {
  // get a function to connect to a particular wallet
  // options: useMetamask() - useCoinbase() - useWalletConnect()
  const connectWithMetamask = useMetamask();
  // once connected, you can get the connected wallet information from anywhere (address, signer)
  const address = useAddress();
  return (
    <div>
      {address ? (
        <h4>Connected as {address}</h4>
      ) : (
        <button onClick={connectWithMetamask}>Connect Metamask Wallet</button>
      )}
    </div>
  );
};

3. Interact with a thirdweb contract

Once connected, you can easily interact with your deployed contracts with dedicated contract hooks.

import { useNFTCollection } from "@thirdweb-dev/react";

const NFTListComponent = () => {
  // get an instance of your own contract
  const nftCollection = useNFTCollection("{{your nft contract address}}");

  const [nfts, setNfts] = useState<NFTMetadataOwner[]>([]);

  useEffect(() => {
    if (nftCollection) {
      // call functions on your contract
      nftCollection
        .getAll()
        .then((nfts) => {
          setNfts(nfts);
        })
        .catch((error) => {
          console.error("failed to fetch nfts", error);
        });
    }
  }, [nftCollection]);

  return (
    <ul>
      {nfts.map((nft) => (
        <li key={nft.metadata.id.toString()}>{nft.metadata.name}</li>
      ))}
    </ul>
  );
};

Advanced Configuration

These all the configuration options of the <ThirdwebProvider />. We provide sane defaults for all of these, but you customize them to suit your needs.

import { ChainId, IpfsStorage, ThirdwebProvider } from "@thirdweb-dev/react";

const KitchenSinkExample = () => {
  return (
    <ThirdwebProvider
      desiredChainId={ChainId.Mainnet}
      chainRpc={{ [ChainId.Mainnet]: "https://mainnet.infura.io/v3" }}
      dAppMeta={{
        name: "Example App",
        description: "This is an example app",
        isDarkMode: false,
        logoUrl: "https://example.com/logo.png",
        url: "https://example.com",
      }}
      storageInterface={new IpfsStorage("https://your.ipfs.host.com")}
      supportedChains={[ChainId.Mainnet]}
      walletConnectors={[
        "walletConnect",
        { name: "injected", options: { shimDisconnect: false } },
        {
          name: "walletLink",
          options: {
            appName: "Example App",
          },
        },
      ]}
      sdkOptions={{
        gasSettings: { maxPriceInGwei: 500, speed: "fast" },
        readonlySettings: {
          chainId: ChainId.Mainnet,
          rpcUrl: "https://mainnet.infura.io/v3",
        },
        gasless: {
          openzeppelin: {
            relayerUrl: "your-relayer-url",
          },
        },
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
};
4.1.8

2 years ago

4.1.7

2 years ago

4.1.9

2 years ago

3.16.1

2 years ago

3.16.0

2 years ago

3.16.3

2 years ago

3.16.2

2 years ago

3.16.5

2 years ago

3.16.4

2 years ago

4.1.4

2 years ago

4.1.3

2 years ago

4.1.6

2 years ago

4.1.5

2 years ago

4.1.0

2 years ago

4.1.2

2 years ago

4.1.1

2 years ago

4.0.5

2 years ago

4.0.4

2 years ago

4.0.7

2 years ago

4.0.6

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

4.0.3

2 years ago

4.0.2

2 years ago

3.14.33

2 years ago

3.14.34

2 years ago

3.14.35

2 years ago

3.14.36

2 years ago

4.0.9

2 years ago

3.14.37

2 years ago

4.0.8

2 years ago

3.14.38

2 years ago

3.14.39

2 years ago

3.14.30

2 years ago

3.14.31

2 years ago

3.14.32

2 years ago

3.14.40

2 years ago

3.14.41

2 years ago

3.14.19

2 years ago

3.14.11

2 years ago

3.14.12

2 years ago

3.14.13

2 years ago

3.14.14

2 years ago

3.14.15

2 years ago

3.14.16

2 years ago

3.14.17

2 years ago

3.14.18

2 years ago

3.14.10

2 years ago

3.14.22

2 years ago

3.14.23

2 years ago

3.14.24

2 years ago

3.14.25

2 years ago

3.14.26

2 years ago

3.14.27

2 years ago

3.14.28

2 years ago

3.14.29

2 years ago

3.14.20

2 years ago

3.14.21

2 years ago

3.15.0

2 years ago

3.14.9

2 years ago

3.14.8

2 years ago

3.14.7

2 years ago

3.14.6

2 years ago

4.1.10

2 years ago

4.0.10

2 years ago

3.14.3

2 years ago

3.14.5

2 years ago

3.14.4

2 years ago

3.14.2

2 years ago

3.14.1

2 years ago

3.14.0

2 years ago

3.13.1

2 years ago

3.11.9

2 years ago

3.11.11

2 years ago

3.11.10

2 years ago

3.13.0

2 years ago

3.12.1

2 years ago

3.12.0

2 years ago

3.12.3

2 years ago

3.12.2

2 years ago

3.12.4

2 years ago

3.11.8

2 years ago

3.11.4

2 years ago

3.11.3

2 years ago

3.11.6

2 years ago

3.11.5

2 years ago

3.11.7

2 years ago

3.11.0

2 years ago

3.11.2

2 years ago

3.11.1

2 years ago

3.10.1

2 years ago

3.10.0

2 years ago

3.10.3

2 years ago

3.10.2

2 years ago

3.9.3

2 years ago

3.9.2

2 years ago

3.9.1

2 years ago

3.9.0

2 years ago

3.9.5

2 years ago

3.9.4

2 years ago

3.7.4

2 years ago

3.7.3

2 years ago

3.7.2

2 years ago

3.8.2

2 years ago

3.8.1

2 years ago

3.7.1

2 years ago

3.6.9

2 years ago

3.6.8

3 years ago

3.6.7

3 years ago

3.6.11

2 years ago

3.6.10

2 years ago

3.7.0

2 years ago

3.2.2

3 years ago

3.2.1

3 years ago

3.2.0

3 years ago

3.2.6

3 years ago

3.2.5

3 years ago

3.2.4

3 years ago

3.2.3

3 years ago

3.6.2

3 years ago

3.6.1

3 years ago

3.6.0

3 years ago

3.6.6

3 years ago

3.6.5

3 years ago

3.6.4

3 years ago

3.6.3

3 years ago

3.5.2

3 years ago

3.5.1

3 years ago

3.5.0

3 years ago

3.4.0

3 years ago

3.4.4

3 years ago

3.4.3

3 years ago

3.4.2

3 years ago

3.4.1

3 years ago

3.3.1

3 years ago

3.3.0

3 years ago

3.1.2

3 years ago

3.1.1

3 years ago

3.1.0

3 years ago

3.0.4

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.8

3 years ago

3.0.7

3 years ago

3.0.6

3 years ago

3.0.5

3 years ago

3.0.0

3 years ago

2.8.1

3 years ago

2.8.0

3 years ago

2.9.2

3 years ago

2.9.1

3 years ago

2.9.4

3 years ago

2.9.3

3 years ago

2.9.6

3 years ago

2.9.5

3 years ago

2.9.7

3 years ago

2.7.2

3 years ago

2.7.1

3 years ago

2.8.2

3 years ago

2.7.4

3 years ago

2.7.3

3 years ago

2.7.5

3 years ago

2.9.0

3 years ago

2.8.0-1

3 years ago

2.8.0-0

3 years ago

2.7.3-5

3 years ago

2.7.3-6

3 years ago

2.7.3-1

3 years ago

2.7.3-2

3 years ago

2.7.3-3

3 years ago

2.7.3-4

3 years ago

2.7.3-0

3 years ago

2.7.0

3 years ago

2.7.0-0

3 years ago

2.7.0-1

3 years ago

2.7.0-2

3 years ago

2.7.1-0

3 years ago

2.7.1-1

3 years ago

2.7.1-2

3 years ago

2.4.3

3 years ago

2.4.2

3 years ago

2.4.5

3 years ago

2.4.4

3 years ago

2.6.0-3

3 years ago

2.6.0-4

3 years ago

2.6.0-1

3 years ago

2.6.0-2

3 years ago

2.6.0-0

3 years ago

2.4.3-0

3 years ago

2.5.0-0

3 years ago

2.6.1-0

3 years ago

2.6.5-0

3 years ago

2.4.7

3 years ago

2.4.6

3 years ago

2.4.8

3 years ago

3.0.0-1

3 years ago

3.0.0-0

3 years ago

2.4.2-4

3 years ago

2.4.2-3

3 years ago

2.4.2-2

3 years ago

2.4.2-1

3 years ago

2.6.1

3 years ago

2.6.0

3 years ago

2.6.3

3 years ago

2.6.2

3 years ago

2.6.2-0

3 years ago

2.6.6-0

3 years ago

2.4.9-0

3 years ago

2.4.9-1

3 years ago

2.4.9-4

3 years ago

2.4.9-2

3 years ago

2.4.9-3

3 years ago

2.5.0

3 years ago

2.5.1

3 years ago

2.6.3-0

3 years ago

2.6.3-1

3 years ago

2.6.3-4

3 years ago

2.6.3-5

3 years ago

2.6.3-2

3 years ago

2.6.3-3

3 years ago

2.6.5

3 years ago

2.6.4

3 years ago

2.2.7-0

3 years ago

2.4.1

3 years ago

2.4.0

3 years ago

2.4.2-0

3 years ago

2.3.0

3 years ago

2.3.2

3 years ago

2.3.1

3 years ago

2.3.4

3 years ago

2.3.3

3 years ago

2.3.6

3 years ago

2.3.5

3 years ago

2.3.0-1

3 years ago

2.3.0-0

3 years ago

2.3.7-1

3 years ago

2.3.7-0

3 years ago

2.4.1-0

3 years ago

2.2.5-3

3 years ago

2.2.5-2

3 years ago

2.2.5-1

3 years ago

2.2.3

3 years ago

2.2.5-0

3 years ago

2.2.5

3 years ago

2.2.4

3 years ago

2.2.7

3 years ago

2.2.6

3 years ago

2.2.5-4

3 years ago

2.3.12-0

3 years ago

2.3.12-1

3 years ago

2.3.8

3 years ago

2.3.7

3 years ago

2.3.9

3 years ago

2.4.0-2

3 years ago

2.4.0-1

3 years ago

2.4.0-0

3 years ago

2.2.8-0

3 years ago

2.2.8-4

3 years ago

2.2.8-3

3 years ago

2.2.8-2

3 years ago

2.2.8-1

3 years ago

2.3.11-0

3 years ago

2.3.11-1

3 years ago

2.3.11-2

3 years ago

2.3.11-3

3 years ago

2.3.11-4

3 years ago

2.4.0-9

3 years ago

2.4.0-8

3 years ago

2.4.0-7

3 years ago

2.3.13

3 years ago

2.4.0-6

3 years ago

2.4.0-5

3 years ago

2.3.12

3 years ago

2.4.0-4

3 years ago

2.4.0-3

3 years ago

2.3.11

3 years ago

2.3.2-1

3 years ago

2.3.10

3 years ago

2.3.2-0

3 years ago

2.2.1

3 years ago

2.0.6-0

3 years ago

2.2.0

3 years ago

2.0.5

3 years ago

2.0.4-0

3 years ago

2.2.2

3 years ago

2.0.4

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.1.0-1

3 years ago

2.1.0-0

3 years ago

2.1.0-3

3 years ago

2.1.0-2

3 years ago

2.1.0-5

3 years ago

2.1.0-4

3 years ago

2.1.0-7

3 years ago

2.1.0-6

3 years ago

2.1.0-9

3 years ago

2.1.0-8

3 years ago

2.0.6-5

3 years ago

2.0.6-4

3 years ago

2.0.6-3

3 years ago

2.0.6-2

3 years ago

2.0.6-1

3 years ago

2.0.5-1

3 years ago

2.0.5-0

3 years ago

2.1.1-0

3 years ago

2.1.0

3 years ago

2.2.0-0

3 years ago

2.2.0-3

3 years ago

2.2.0-2

3 years ago

2.2.0-1

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.2-2

3 years ago

2.0.2-1

3 years ago

2.0.2-0

3 years ago

2.0.1-0

3 years ago

2.0.1

3 years ago

2.0.0-nightly.7

3 years ago

2.0.0-nightly.9

3 years ago

2.0.0-nightly.8

3 years ago

2.0.0-nightly.10

3 years ago

2.0.0-nightly.12

3 years ago

2.0.0-nightly.11

3 years ago

2.0.0-nightly.13

3 years ago

2.0.0

3 years ago

2.0.0-nightly.6

3 years ago

2.0.0-nightly.5

3 years ago

2.0.0-nightly.4

3 years ago

2.0.0-nightly.3

3 years ago

2.0.0-nightly.2

3 years ago

2.0.0-nightly.1

3 years ago

2.0.0-nightly.0

3 years ago

1.0.0-alpha.3

3 years ago

1.0.0-alpha.2

3 years ago

1.0.0-alpha.1

3 years ago