3Box Profile Hover Plugin 💥

Simple plugin to add 3Box profile hovers to your app

profile-hover node package is a drop-in component that allows web3 developers to add a 3Box profile modal that appears when users hover on an Ethereum address, similar to the profile hover modals used on Twitter desktop web. 3Box Profile Hovers display users' name, image, cover photo, description, and verified Twitter/Github handles.

The 3Box Profile Hover plugin is built using 3Box infrastructure, is available in React and HTML/CSS versions, and is easily integrated with a few lines of code.

Try Profile Hovers here

Profile Hover

How it Works

Component Overview

Profile Hover consists of two components: the Tile, which is displayed on the page, and the Hover, which is displayed when the Tile is hovered.

Architecture

Profile Hover is built using the getProfile() method of the 3Box Profiles API, which is made available via the 3Box.js SDK. Profile Hover includes logic for fetching user profiles and UI components for displaying profile information in a Tile and Hover element described above.

Getting Started with Profile Hover

1. Install the Component

3Box Profile Hover is available as a React or HTML component. Install the appropriate element for your application.

Install the React Component

npm i -S profile-hover

Usage:

import ProfileHover from 'profile-hover';
const MyComponent = () => (<ProfileHover address={'0xa8ee0babe72cd9a80ae45dd74cd3eae7a82fd5d1'} />);

Install the HTML Element

First add the script at the end of your page.

<script type="text/javascript" src="https://unpkg.com/profile-hover"></script>

Then add the following tag where ever you display an address.

<threebox-address data-address='0xa8ee0babe72cd9a80ae45dd74cd3eae7a82fd5d1'></threebox-address>

2. Using the React Profile Hover

This step is for those that installed the React component in Step 1. If you installed the HTML element, jump to Step 3.

Add Profile Hovers to your application:

import ProfileHover from 'profile-hover';
const MyComponent = () => (<ProfileHover address={'0xa8ee0babe72cd9a80ae45dd74cd3eae7a82fd5d1'} />);

Customize your Profile Hovers:

Here are the ways you can customize the profile hover to better suit your app's needs.

Prop Types

Property

Type

Default

Component

Description

address

String

Address property value is required to work. Provide an Ethereum address to this property to fetch profile information.

showName

Boolean

False

Tile

Provide property showName to show the user's name from their 3Box profile instead of their Ethereum address.

url

String

Tile

Provide property url with url string to set where clicking on the Tile will redirect the user.

displayFull

Boolean

False

Tile

Add displayFull property to show the entire address instead of the shortened display.

tileStyle

Boolean

False

Tile

Add tileStyle property to render the tile component as a tile.

noTheme

Boolean

False

Tile

Add noTheme property to not use any of our Tile styling. Allows you to wrap any existing elements in a Hover component.

noImgs

Boolean

False

Hover

Add noImgs property to prevent displaying of profile image and cover image in the Hover.

noProfileImg

Boolean

False

Hover

Add noProfileImg property to prevent displaying of just the profile image in the Hover.

noCoverImg

Boolean

False

Hover

Add noCoverImg property to prevent displaying of just the cover image in the Hover.

orientation

String

'right'

Hover

Provide property orientation with string 'top', 'bottom', 'right' or 'left' to set which way the Hover will pop up from the Tile.

Prop Types example

<ProfileHover
address={'0xa8ee0...'}
orientation="bottom"
noCoverImg
url="https://3box.io/"
/>
<ProfileHover
address={'0xa8ee0...'}
noTheme
>
... your own html and styling
</ProfileHover>

3. Using the HTML Profile Hover

This step is only for those that installed the HTML element. Skip this step if you installed the React component.

First, add the following tag where ever you display an address:

<threebox-address data-address='0xa8ee0babe72cd9a80ae45dd74cd3eae7a82fd5d1'></threebox-address>

Then, decide how you want to display your tile element:

Add data-display='full' to show the entire address instead of the shorten display.

<threebox-address data-address='0xa8ee0...' data-display='full'></threebox-address>

Add data-theme='none' to not use any of our tile styling. This option allows you to wrap any existing elements in an address hover.

<threebox-address data-address='0xa8ee0...' data-theme='none'>
... your own html and styling
</threebox-address>

Differences Between Desktop and Mobile

Given the current state of Web3 mobile dapp browsers and their lack of browser tab support, the behavior of the profile-hover React component has minor differences depending on device context. On desktop web and web2 mobile browsers, out-bound links within the hover element work as usual and open a new tab. However on Web3 mobile dapp browsers, since tabs do not exist, clicking on a link within the hover component will, instead, copy that URL to a users clipboard.