A fully customizable component to display users.
npm install useritemTo use the UserItem component in your React/Next.js application, you can install it via npm or yarn:
``bash`
npm i useritem@latest
yarn add useritem@latest
`bash
import UserItem from 'useritem';
description="johndoe@mail.com"
avatarUrl="https://example.com/avatar.jpg"
onClick={(e) => console.log("User item clicked!", e)}
/>
`
| Prop | Type | Description | Default |
|--------------------|---------------------------------------|-------------------------------------------------------------------------------------------------------|--------------------------|
| avatar | boolean | Determines whether the avatar should be displayed or not. | true |avatarUrl
| | string | URL of the user's avatar image. Default value is a default avatar image URL. | |avatarBackgroundColor
| | string | Background color of the avatar. | '#ccc' |border
| | boolean | Determines whether a border should be displayed around the component. | true |description
| | string | User description or email. | "johndoe@mail.com" |disabled
| | boolean | Determines whether the user item should be disabled. | false |onClick
| | (event: MouseEvent) => void | Function to handle click events on the user item. | |width
| | number | Width of the component. | 200px |online
| | boolean | Determines whether the user is online. | false |reverse
| | boolean | Determines whether the layout should be reversed. | false |squared
| | boolean | Determines whether the corners should be squared. | false |status
| | boolean | Determines whether the user is a status user. | false |shadow
| | boolean | Determines whether a shadow effect should be added. | false |style
| | React.CSSProperties or undefined | Custom CSS styles for the component. | |name
| | string | User's name or title. Default value is "John Doe". | "John Doe" |verified
| | boolean | Indicates whether the user is verified. | false |verifiedColor
| | string | Background color for the verified status badge. | '#4caf50'` |
This component is licensed under the MIT License. Feel free to use and modify it as needed for your projects.
Star on Github 👉 Github