drizzle-react

Requires React 0.14+ npm install --save drizzle-react

drizzle-react is the official way to integrate Drizzle with your React dapp.

Tired of constantly coding contract calls after your state changes? Wish you had a one-liner for knowing when your dapp is ready to use? Ethereum developers have to account for extra considerations that traditional apps don't have to worry about. Drizzle abstracts away the boilerplate of creating a dapp front-end, allowing you to focus on what makes it unique. Drizzle handles instantiating web3 and contracts, fetching accounts, and keeping all of this data in sync with the blockchain.

Check out the Drizzle Truffle Box for a complete example, or continue reading to create your own setup.

Getting Started

Note: Since Drizzle uses web3 1.0 and web sockets, be sure your development environment can support these.

1. Import the provider.

   import { DrizzleProvider } from 'drizzle-react'

2. Create an options object and pass in the desired contract artifacts for Drizzle to instantiate. Other options are available, see the Options section of the Drizzle docs below.

   // Import contracts
   import SimpleStorage from './../build/contracts/SimpleStorage.json'
   import TutorialToken from './../build/contracts/TutorialToken.json'
   
   const options = {
     contracts: [
       SimpleStorage,
       TutorialToken
     ]
   }

3. Wrap your app with DrizzleProvider and pass in an options object. You can also pass in your existing store. See our documentation for more information on using an existing Redux store.

   <DrizzleProvider options={options}>
     <App />
   </DrizzleProvider>

4. Wrap your components using the drizzleConnect function. It has the same API as the connect() function in react-redux. See their docs here.

   import { drizzleConnect } from 'drizzle-react'
   
   const mapStateToProps = state => {
     return {
       drizzleStatus: state.drizzleStatus,
       SimpleStorage: state.contracts.SimpleStorage
     }
   }
   
   const HomeContainer = drizzleConnect(Home, mapStateToProps);

   See Drizzle State in the Drizzle docs for the entire state tree.

5. Get contract data by accessing the contracts via context. Calling the data() function on a contract will first check the store for a cached result. If empty, Drizzle will query the blockchain and cache the response for future use. For more information on how this works, see How Data Stays Fresh in the Drizzle docs.

   Note: We have to check that Drizzle is initialized before fetching data. A one-liner such as below is fine for display a few pieces of data, but a better approach for larger dapps is to use a loading component.

   // For convenience
   constructor(props, context) {
     super(props)
   
     this.contracts = context.drizzle.contracts
   }
   
   // If Drizzle is initialized (and therefore web3, accounts and contracts), fetch data.
   // This will update automatically when the contract state is altered.
   var storedData = this.props.drizzleStatus.initialized ? this.contracts.SimpleStorage.methods.storedData.data() : 'Loading...'

   The contract instance has all of its standard web3 properties and methods. For example, sending a transaction is done as normal:

   this.contracts.SimpleStorage.methods.set(this.state.storageAmount).send()

Recipe: Loading Component

The following wrapper and component will detect when your dapp isn't ready and allow you to display the appropriate status or course of action:

LoadingContainer.js

import Loading from './Loading.js'
import { drizzleConnect } from 'drizzle-react'

// May still need this even with data function to refresh component on updates for this contract.
const mapStateToProps = state => {
  return {
    drizzleStatus: state.drizzleStatus,
    web3: state.web3
  }
}

const LoadingContainer = drizzleConnect(Loading, mapStateToProps);

export default LoadingContainer

Loading.js

import React, { Component, Children } from 'react'

class Loading extends Component {
  constructor(props, context) {
    super(props)
  }

  render() {
    if (this.props.web3.status === 'failed')
    {
      return(
        // Display a web3 warning.
        <main>
          <h1>⚠️</h1>
          <p>This browser has no connection to the Ethereum network. Please use the Chrome/FireFox extension MetaMask, or dedicated Ethereum browsers Mist or Parity.</p>
        </main>
      )
    }

    if (this.props.drizzleStatus.initialized)
    {
      // Load the dapp.
      return Children.only(this.props.children)
    }

    return(
      // Display a loading indicator.
      <main>
        <h1>⚙️</h1>
        <p>Loading dapp...</p>
      </main>
    )
  }
}

export default Loading