useritem

Get Started

To use the UserItem component in your React/Next.js application, you can install it via npm or yarn:

npm i useritem@latest
yarn add useritem@latest

React & Next.js

import UserItem from 'useritem';

<UserItem
  name="John Doe"
  description="[email protected]"
  avatarUrl="https://example.com/avatar.jpg"
  onClick={(e) => console.log("User item clicked!", e)}
/>

Props

| 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. | "[email protected]" | | 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' |

License

This component is licensed under the MIT License. Feel free to use and modify it as needed for your projects.

Star on Github 👉 Github