by coopermaruyama

coopermaruyama / react-web3

Ensure web3 is available before your app renders

208 Stars 54 Forks Last release: Not found 75 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Web3


Ensure web3 is available before your app loads.

This package is compatible with both [email protected] and [email protected]

exports a
 React component which wraps your app
and ensures it doesn't render until web3 is available. It also renders a nice
message to the user to guide them in the following cases:

  1. The user is not using a web3-capable browser, or
  2. The user has web3 support, but their account is locked (their ETH address is inaccessible)

Along with the above,


  • Reacts to the user unlocking their wallet or switching accounts.
  • Provides a context to your entire app with useful data.
  • Accepts a callback that is called when user switches to a different account.


$ npm install react-web3


$ npm test


Wrap your root-level react component:

import { Web3Provider } from 'react-web3';

// ...

// Ensure that doesn't render until we confirm web3 is available ReactDOM.render(rootEl, );


 provides a child context to your app with useful data:
import React from 'react';
import PropTypes from 'prop-types';

function SomeComponent(props, context) { const web3Context = context.web3;


  • web3Context = {

  • accounts: {Array} - All accounts

  • selectedAccount: {string} - Default ETH account address (coinbase)

  • network: {string} - One of 'MAINNET', 'ROPSTEN', or 'UNKNOWN'

  • networkId: {string} - The network ID (e.g. '1' for main net)

  • }

  • /

    return (

    Hello Web3
    ); }

SomeComponent.contextTypes = { web3: PropTypes.object };

export default SomeComponent;

Accepted Props

 accepts the following optional props:

  • onChangeAccount
    (Function): Callback which is called when the user switches to a new account. Callback will receive the new ETH address as an argument.
    • Example:
      onChangeAccount={nextAddress => console.log(nextAddress)}
  • web3UnavailableScreen
    (ReactElement): React component to override the screen that is shown when web3 is unavailable.
    • Example:
      web3UnavailableScreen={() => 
      You need web3!
  • accountUnavailableScreen
    (ReactElement): React component to override the screen that is shown when the user's wallet is locked.
    • Example:
      accountUnavailableScreen={() => 
      Please unlock your wallet!
  • passive
    (Boolean): If true, your app will be rendered right away even if an ETH address is not available, and the message screens will become irrelevant and never be rendered. This is useful for apps that don't require web3 in order to render the app, but which has optional features that require web3. An example would be if you had an online store that simply allowed ETH as a payment option. In this case, you could read the web3 context and handle it manually in any of your components.
    • Example:
      const methods = ['Credit Card', 'Check', 'Ether'];
      const PaymentMethods = (props, context) => (
      {methods.filter( // filter out the 'Ether' option if no account is available method => method !== 'Ether' || !!context.web3.selectedAccount ).map( method => )}

Redux Support

If you're using

, then you most likely have a

component at the very root of your app. If this is the case, 

will dispatch the following actions to your redux store:

    Dispatched the first time an ETH account is available.
    Dispatched when the user switches between accounts.
  • web3/LOGOUT
    Dispatched when user logs out (accounts are no longer available).

Both actions provide the ETH address at


Example Usage:

// In your reducer:
function reducer(state, action) {
  switch(action.type) {
    case 'web3/RECEIVE_ACCOUNT':
      return {
        ethAddress: action.address

case 'web3/CHANGE_ACCOUNT':
  return {
    ethAddress: action.address
case 'web3/LOGOUT':
  return {
    ethAddress: null

} }

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.