Simplify Ethereum Dapp Development with Drizzle React Components

In a previous article, I explained how I created a Dapp in 1 day and how much the Truffle Suite and Drizzle proved instrumental for that.

But what is Drizzle?

Drizzle a library that helps developer interact with Ethereum smart contracts. It includes a Redux store that is kept up-to-date with on-chain contract data.

Furthermore, Drizzle comes with a set of React components that interact with smart contracts.

In this article, I will present you those React components. I used them extensively in my Crypto Museum dapp and I hope that they will be useful to you too!

Installing the Drizzle React components

You can install the packages for the Drizzle React components with the following command:

npm install drizzle-react-components drizzle-react

That being said, the best way to use the Drizzle React components is as a part of the Truffle Suite, since Truffle will compile your smart contracts’ artifacts for use in Drizzle.

If you are starting a new project from scratch, you can initialize Drizzle and the other components of the Truffle Suite through a Drizzle Truffle box.

npx truffle unbox drizzle

Contract Data React component: Read data

The Contract Data component is my favorite Drizzle component because of how simple and straightforward it is to use.

The example below is an example taken from this repo, which is the source code for the Crypto Museum dapp.

        <ContractData
          drizzle={drizzle}
          drizzleState={drizzleState}
          contract="CryptoMuseum"
          method="CID"
          methodArgs={[tokenId]}
          render={(cid) =>  (
            <div>
              {cid}
            </div>
          )}
        />

You can use this component to display data from your smart contract. It displays text by default, but you can pass a render function to create more complex components with the data.

The Contract prop is the name of the contract, provided you have added it to Drizzle prior.
Method is the name of the method you wish to call. Keep in mind that the variables in your smart contracts have getter functions and therefore the variable name can be substituted for the method.
MethodArgs takes an array of values which consists of the function arguments of the smart contract’s called function, if applicable. You must order the values in the same order as they appear in the function.

Since the React component is connected to the Drizzle Redux store, you won’t have to worry about keeping the data they point to up to date. This allows you to show data in real time as they appear in the contracts.

Contract Form component: Write Data

If the ContractData component allows you to display the information in your smart contract, the ContractForm component will allow you to interact with the Smart Contract.

        <ContractForm
          drizzle={drizzle}
          drizzleState={drizzleState}
          contract="myContract"
          method="setNumber"
          labels=["Number"]
        />

The ContractForm component will generate a form with all the input needed to call the contract’s functions. The props contract and method work the same as for the ContractData component.

The labels field corresponds to the labels of your inputs.

Additionally, you have access to a render prop to further customize how the form will be displayed.

More Drizzle…

It is worth noting that the use of the React components is not mandatory for Drizzle. It is simply there to help you out.

You can fetch data or interact directly with the Drizzle state with the cacheCall() and cacheSend() methods.

I hope this was useful to you! You should now be able to quickly setup a dapp frontend that interacts with your smart contracts.