0.1.3 • Published 9 months ago
hns-id-react v0.1.3
hns-id-react
A React component for displaying HNS.ID profiles with customizable styles and interactions. For use on the Optimism network. Visit hns.id for more information.
You can view a live demo here https://hns-id-react.vercel.app/
Table of Contents
Installation
Install the package using npm:
npm install hns-id-reactOr using yarn:
yarn add hns-id-reactUsage
First, import the component in your React file:
import { HnsIdProfile } from 'hns-id-react';Then, use it in your component:
function App() {
return (
<HnsIdProfile address="0x91769843CEc84Adcf7A48DF9DBd9694A39f44b42" />
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| address | string | (required) | The Ethereum address to display the profile for |
| coinType | number | 614 | The coin type for the address (614 is optimism) |
| rpcUrl | string | (optional) | Custom RPC URL for the Optimism network |
| isSepolia | boolean | false | Set to true to use Optimism Sepolia testnet |
| backgroundColor | string | '#f0f0f0' | Background color of the profile component |
| textColor | string | '#000000' | Text color of the profile component |
| fontSize | string | '14px' | Font size of the text |
| padding | string | '8px 12px' | Padding of the component |
| borderRadius | string | '20px' | Border radius of the component |
| isWide | boolean | false | If true, uses a wider layout |
| showAvatar | boolean | true | Whether to show the avatar |
| useDefaultAvatar | boolean | false | If true, uses a default avatar image |
| onClick | () => void | (optional) | Function to call when the profile is clicked |
| avatarSize | number | 24 | Size of the avatar in pixels |
| showTooltip | boolean | false | Whether to show a tooltip on hover |
| customLoadingComponent | React.ReactNode | (optional) | Custom component to show while loading |
| customErrorComponent | React.ReactNode | (optional) | Custom component to show on error |
| showCopyButton | boolean | false | Whether to show a button to copy the address |
| theme | 'light' | 'dark' | 'light' | Color theme of the component |
Examples
Basic Usage
<HnsIdProfile address="0x91769843CEc84Adcf7A48DF9DBd9694A39f44b42" />With Tooltip and Copy Button
<HnsIdProfile
address="0x91769843CEc84Adcf7A48DF9DBd9694A39f44b42"
showTooltip={true}
showCopyButton={true}
/>Custom Styling
<HnsIdProfile
address="0x91769843CEc84Adcf7A48DF9DBd9694A39f44b42"
backgroundColor="#1a1a1a"
textColor="#ffffff"
fontSize="16px"
padding="10px 15px"
borderRadius="25px"
theme="dark"
/>With Click Handler
<HnsIdProfile
address="0x91769843CEc84Adcf7A48DF9DBd9694A39f44b42"
onClick={() => console.log('Profile clicked!')}
/>Development
To set up the development environment:
- Clone the repository
- Install dependencies with
npm install - Start the development server with
npm run dev
To build the package:
npm run buildLicense
This project is licensed under the MIT License - see the LICENSE file for details.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Support
If you encounter any problems or have any questions, please open an issue on the GitHub repository.