@elmqeddem/react-avatar 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -0
- package/package.json +21 -9
- package/src/Avatar.tsx +0 -63
- package/src/index.ts +0 -1
- package/src/types/string-to-color.d.ts +0 -9
- package/tsconfig.json +0 -16
package/README.md
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# @elmqeddem/react-avatar
|
|
2
|
+
|
|
3
|
+
A flexible React Avatar component that supports **text, initials, emojis, or icons** (including Lucide icons). Automatically generates background and text colors based on the name.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 🚀 Features
|
|
8
|
+
|
|
9
|
+
- Display user initials or custom text
|
|
10
|
+
- Accept React icons or emoji as content
|
|
11
|
+
- Auto-generate background and text colors
|
|
12
|
+
- Fully responsive with customizable size
|
|
13
|
+
- Supports any React element as content
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## 💻 Installation
|
|
18
|
+
|
|
19
|
+
Install via npm:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @elmqeddem/react-avatar
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## Usage
|
package/package.json
CHANGED
|
@@ -1,19 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elmqeddem/react-avatar",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "Lightweight React avatar component with initials and custom content",
|
|
5
|
+
"license": "ISC",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"module": "dist/index.mjs",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
5
19
|
"scripts": {
|
|
6
20
|
"build": "tsup src/index.ts --dts --format esm,cjs"
|
|
7
21
|
},
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"react": ">=18",
|
|
24
|
+
"react-dom": ">=18"
|
|
25
|
+
},
|
|
12
26
|
"dependencies": {
|
|
13
27
|
"@marko19907/string-to-color": "^1.0.1",
|
|
14
|
-
"lucide-react": "^0.562.0"
|
|
15
|
-
"react": "^18.3.1",
|
|
16
|
-
"react-dom": "^18.3.1"
|
|
28
|
+
"lucide-react": "^0.562.0"
|
|
17
29
|
},
|
|
18
30
|
"devDependencies": {
|
|
19
31
|
"@types/react": "^18.3.27",
|
package/src/Avatar.tsx
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode, isValidElement, cloneElement, ReactElement } from "react";
|
|
2
|
-
import { generateColor } from "@marko19907/string-to-color";
|
|
3
|
-
|
|
4
|
-
interface AvatarProps {
|
|
5
|
-
name?: string;
|
|
6
|
-
size?: number;
|
|
7
|
-
content?: string | ReactNode ;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const Avatar = ({
|
|
11
|
-
name = "",
|
|
12
|
-
size = 40,
|
|
13
|
-
content,
|
|
14
|
-
}: AvatarProps) => {
|
|
15
|
-
const bgColor = generateColor(name || "default", {
|
|
16
|
-
saturation: 70,
|
|
17
|
-
lightness: 94,
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
const textColor = generateColor(name || "default", {
|
|
21
|
-
saturation: 70,
|
|
22
|
-
lightness: 60,
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
const initials = name
|
|
26
|
-
? name
|
|
27
|
-
.split(" ")
|
|
28
|
-
.map(w => w[0]?.toUpperCase())
|
|
29
|
-
.slice(0, 2)
|
|
30
|
-
.join("")
|
|
31
|
-
: "";
|
|
32
|
-
|
|
33
|
-
const renderContent = content
|
|
34
|
-
? typeof content === "string"
|
|
35
|
-
? content
|
|
36
|
-
: isValidElement(content)
|
|
37
|
-
? cloneElement(content as ReactElement<any>, {
|
|
38
|
-
size: size * 0.5, // auto scale icon
|
|
39
|
-
strokeWidth: 2, // Lucide icons look better
|
|
40
|
-
})
|
|
41
|
-
: null
|
|
42
|
-
: initials;
|
|
43
|
-
|
|
44
|
-
return (
|
|
45
|
-
<div
|
|
46
|
-
style={{
|
|
47
|
-
width: size,
|
|
48
|
-
height: size,
|
|
49
|
-
backgroundColor: bgColor,
|
|
50
|
-
color: textColor,
|
|
51
|
-
display: "flex",
|
|
52
|
-
alignItems: "center",
|
|
53
|
-
justifyContent: "center",
|
|
54
|
-
borderRadius: "50%",
|
|
55
|
-
fontWeight: "400",
|
|
56
|
-
fontSize: size * 0.45,
|
|
57
|
-
userSelect: "none",
|
|
58
|
-
}}
|
|
59
|
-
>
|
|
60
|
-
{renderContent}
|
|
61
|
-
</div>
|
|
62
|
-
);
|
|
63
|
-
};
|
package/src/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Avatar } from "./Avatar";
|
package/tsconfig.json
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2018",
|
|
4
|
-
"module": "ESNext",
|
|
5
|
-
"jsx": "react-jsx",
|
|
6
|
-
"moduleResolution": "bundler",
|
|
7
|
-
"declaration": true,
|
|
8
|
-
"outDir": "dist",
|
|
9
|
-
"strict": true,
|
|
10
|
-
"skipLibCheck": true,
|
|
11
|
-
"allowSyntheticDefaultImports": true,
|
|
12
|
-
"esModuleInterop": true
|
|
13
|
-
},
|
|
14
|
-
"include": ["src"]
|
|
15
|
-
}
|
|
16
|
-
|