{"id":21658900,"url":"https://github.com/3box/profile-hover","last_synced_at":"2025-07-17T21:31:56.112Z","repository":{"id":52413132,"uuid":"168911637","full_name":"3box/profile-hover","owner":"3box","description":"Drop-in profile hover for any ethereum address","archived":true,"fork":false,"pushed_at":"2021-08-09T12:06:01.000Z","size":4958,"stargazers_count":26,"open_issues_count":25,"forks_count":9,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-06-13T21:04:08.859Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://3box.github.io/profile-hover/example/react","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/3box.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-03T05:07:25.000Z","updated_at":"2024-11-29T11:54:36.000Z","dependencies_parsed_at":"2022-09-13T03:01:26.901Z","dependency_job_id":null,"html_url":"https://github.com/3box/profile-hover","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/3box/profile-hover","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3box%2Fprofile-hover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3box%2Fprofile-hover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3box%2Fprofile-hover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3box%2Fprofile-hover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3box","download_url":"https://codeload.github.com/3box/profile-hover/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3box%2Fprofile-hover/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265437327,"owners_count":23765120,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T09:30:00.474Z","updated_at":"2025-07-17T21:31:55.401Z","avatar_url":"https://github.com/3box.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# ⚠️ ⚠️ This project is no longer supported ⚠️ ⚠️ \n\u003e 3box.js and related tools built by 3Box Labs are deprecated and no loger supported. Developers are encurraged to build with https://ceramic.network which is a more secure and decentralized protocol for sovereign data.\n\n# Profile Hover\n\n`profile-hover` is a drop-in component that displays profile metadata for any ethereum address. Available in React and HTML/CSS versions.\n\n![Profile Hover](./example/profile-hover.gif)\n\n\n## Component Overview\nThe 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. Profile Hover is available for React and HTML/CSS apps.\n\n## Getting Started\n\n### React Component\nInstallation:\n\n```shell\nnpm i -S profile-hover\n```\n\nUsage:\n\n```jsx\nimport ProfileHover from 'profile-hover';\n\nconst MyComponent = () =\u003e (\u003cProfileHover address={'0xa8ee0babe72cd9a80ae45dd74cd3eae7a82fd5d1'} /\u003e);\n```\n\n### HTML Element\n\nFirst add the script at the end of your page.\n\n```html\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/profile-hover\"\u003e\u003c/script\u003e\n```\n\nThen add the following tag where ever you display an address.\n\n```html\n  \u003cthreebox-address data-address='0xa8ee0babe72cd9a80ae45dd74cd3eae7a82fd5d1'\u003e\u003c/threebox-address\u003e\n```\n\nAdditional Options:\n\nAdd `data-display='full'` to show the entire address instead of the shorten display.\n\n```html\n  \u003cthreebox-address data-address='0xa8ee0...' data-display='full'\u003e\u003c/threebox-address\u003e\n```\n\nAdd `data-theme='none'` to not use any of our address bar styling. Allows you to wrap any existing elements in an address hover.\n\n```html\n  \u003cthreebox-address data-address='0xa8ee0...' data-theme='none'\u003e\n    ... your own html and styling\n  \u003c/threebox-address\u003e\n```\n\n## How to Customize\nHere are the ways you can customize the profile hover to better suit your app's needs.\n\n### Prop Types\n\n| Property | Type          | Default  | Component    | Description |\n| :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `address`    | String        |    |     | `Address` property value is **required** to work.  Provide an Ethereum address to this property to fetch profile information. |\n| `showName`    | Boolean       | False  | Tile    | Provide property `showName` to show the user's name from their 3Box profile instead of their Ethereum address.|\n| `url`    | String       |   | Tile    | Provide property `url` with url string to set where clicking on the Tile will redirect the user.|\n| `displayFull`    | Boolean        | False   | Tile    | Add `displayFull` property to show the entire address instead of the shortened display.|\n| `tileStyle`    | Boolean       |  False   | Tile    | Add `tileStyle` property to render the tile component as a tile.                                                                                                                                                                                                                                                                                                             |\n| `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.                                                                                                                                                                                                                                                                                                             |\n| `noImgs`    | Boolean        | False   | Hover    | Add `noImgs` property to prevent displaying of profile image and cover image in the Hover.                                                                                                                    |\n| `noProfileImg`    | Boolean       |  False   | Hover    | Add `noProfileImg` property to prevent displaying of just the profile image in the Hover. |\n| `noCoverImg`    | Boolean       |  False   | Hover    | Add `noCoverImg` property to prevent displaying of just the cover image in the Hover. |\n| `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.|\n\n#### Prop Types example\n```jsx\n\u003cProfileHover \n  address={'0xa8ee0...'}\n  orientation=\"bottom\"\n  noCoverImg\n  url=\"https://3box.io/\"\n/\u003e\n```\n```jsx\n\u003cProfileHover \n  address={'0xa8ee0...'} \n  noTheme\n\u003e\n  ... your own html and styling\n\u003c/ProfileHover\u003e\n```\n\n## Differences Between Desktop and Mobile\nGiven 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.\n\n## Maintainers\n[@zachferland](https://github.com/zachferland)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3box%2Fprofile-hover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3box%2Fprofile-hover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3box%2Fprofile-hover/lists"}