Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guillaumeduhan/useritem
A lightweight and modular React component to display your users informations.
https://github.com/guillaumeduhan/useritem
Last synced: 2 days ago
JSON representation
A lightweight and modular React component to display your users informations.
- Host: GitHub
- URL: https://github.com/guillaumeduhan/useritem
- Owner: guillaumeduhan
- Created: 2024-02-05T21:44:49.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T13:18:25.000Z (3 months ago)
- Last Synced: 2025-01-10T11:17:40.128Z (9 days ago)
- Language: TypeScript
- Homepage: https://dub.link/useritem
- Size: 1.51 MB
- Stars: 68
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- jimsghstars - guillaumeduhan/useritem - A lightweight and modular React component to display your users informations. (TypeScript)
README
# useritem
## Get Started
To 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
```
## React & Next.js
```bash
import UserItem from 'useritem';
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](https://dub.sh/useritem-github)