npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-web3

v1.2.0

Published

![demo](https://d3vv6lp55qjaqc.cloudfront.net/items/0x0U0Y2G3W3L3R203l2X/Screen%20Recording%202017-07-30%20at%2005.07%20AM.gif?X-CloudApp-Visitor-Id=1754851&v=759f0b27)

Downloads

74

Readme

React Web3

demo

Ensure web3 is available before your app loads.

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

react-web3 exports a <Web3Provider /> 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, <Web3Provider /> also:

  • 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.

Installation

$ npm install react-web3

# web3 1.0 support (beta)
$ npm install react-web3@beta

Test

$ npm test

Usage

Wrap your root-level react component:

import { Web3Provider } from 'react-web3';

// ...

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

Context

<Web3Provider /> 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<string>} - 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 (
    <div>
      Hello Web3
    </div>
  );
}

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

export default SomeComponent;

Accepted Props

<Web3Provider /> 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={() => <div>You need web3!</div>}
  • accountUnavailableScreen (ReactElement): React component to override the screen that is shown when the user's wallet is locked.
    • Example: accountUnavailableScreen={() => <div>Please unlock your wallet!</div>}
  • 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) => (
        <div>
          {methods.filter(
            // filter out the 'Ether' option if no account is available
            method => method !== 'Ether' || !!context.web3.selectedAccount
          ).map(
            method => <PaymentMethod method={method} key={method} />
          )}
        </div>
      )

Redux Support

If you're using react-redux, then you most likely have a <Provider /> component at the very root of your app. If this is the case, <Web3Provider /> will dispatch the following actions to your redux store:

  • web3/RECEIVE_ACCOUNT: Dispatched the first time an ETH account is available.
  • web3/CHANGE_ACCOUNT: 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 action.address;

Example Usage:

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

    case 'web3/CHANGE_ACCOUNT':
      return {
        ...state,
        ethAddress: action.address
      };
    case 'web3/LOGOUT':
      return {
        ...state,
        ethAddress: null
      }
  }
}