react-use-web3

React hook for using the Web3 object in your DApps. 🦊 Web3 Documentation

Install:

npm i react-use-web3

Ensure you have the correct peerDependencies

"peerDependencies": {
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "web3": "^1.0.0-beta.51"
}

Set an httpProvider url:

Use the default Web3 provider (Usually MetaMask):

 const { web3, network } = useWeb3();

Or, pass an httpProvider URL to the hook:

 const { web3, network } = useWeb3("https://rinkeby.infura.io/<your-token>");

Simple Example: Use with React.Context

import React, { createContext } from 'react';
import useWeb3 from 'react-use-web3';

export const Web3Context = createContext();

export default ({ children }) => {
  const { web3, network } = useWeb3();

  return (
    <Web3Context.Provider value={{ web3, network }}>
      {children}
    </Web3Context.Provider>
  );
};