A lightweight and easy-to-use React hook for connecting to multiple Web3 wallets like MetaMask and Phantom. Seamlessly integrate Web3 wallet authentication into your React applications with minimal configuration.
Install the package using npm:
npm install react-web3-login
To use the useWeb3Login
hook, simply import it and call it within your React component:
import React from 'react';
import { useWeb3Login, WalletType } from 'react-web3-login';
function App() {
const { account, error, connect } = useWeb3Login();
const handleConnect = async (walletType: WalletType) => {
await connect(walletType);
};
return (
<div>
<button onClick={() => handleConnect('metamask')}>Connect to MetaMask</button>
<button onClick={() => handleConnect('phantom')}>Connect to Phantom</button>
{account && <p>Connected with address: {account}</p>}
{error && <p>Error: {error.message}</p>}
</div>
);
}
export default App;
The useWeb3Login
hook returns the following properties and functions:
account
(string | null): The connected wallet address, ornull
if not connected.error
(Error | null): An error object if an error occurred during the connection process, ornull
if no error.connect(walletType: WalletType)
: A function to initiate the connection process. Takes awalletType
parameter, which can be'metamask'
or'phantom'
.
MIT