@startupjs-ui/user 0.1.13 → 0.1.19
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/CHANGELOG.md +16 -0
- package/README.mdx +9 -7
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.19](https://github.com/startupjs/startupjs-ui/compare/v0.1.18...v0.1.19) (2026-03-17)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @startupjs-ui/user
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @startupjs-ui/user
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @startupjs-ui/user
|
package/README.mdx
CHANGED
|
@@ -10,7 +10,9 @@ import User, { _PropsJsonSchema as UserPropsJsonSchema } from './index'
|
|
|
10
10
|
|
|
11
11
|
Inherits [Div props](/docs/components/Div).
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
Displays user information alongside an avatar. It uses the [Avatar](/docs/components/Avatar) component internally to render the avatar image. Pass `avatarUrl` for the image, `name` for the display name, and `description` for secondary text below the name.
|
|
14
|
+
|
|
15
|
+
The component also supports style overrides via `style`, `nameStyle`, and `descriptionStyle`. Use `descriptionNumberOfLines` to limit the number of visible description lines.
|
|
14
16
|
|
|
15
17
|
```jsx
|
|
16
18
|
import { User } from 'startupjs-ui'
|
|
@@ -26,7 +28,7 @@ return (
|
|
|
26
28
|
|
|
27
29
|
## Sizes
|
|
28
30
|
|
|
29
|
-
|
|
31
|
+
The `size` prop controls the overall dimensions of the avatar and text. Available sizes are `'s'`, `'m'` (default), and `'l'`. See the Sandbox section at the bottom of the page for all available values.
|
|
30
32
|
|
|
31
33
|
```jsx example
|
|
32
34
|
return (
|
|
@@ -56,7 +58,7 @@ return (
|
|
|
56
58
|
|
|
57
59
|
## User status
|
|
58
60
|
|
|
59
|
-
|
|
61
|
+
Use the `status` prop to display a status indicator on the avatar. Built-in values are `'online'` and `'away'`. You can also pass a custom string and provide matching components via `statusComponents`.
|
|
60
62
|
|
|
61
63
|
```jsx example
|
|
62
64
|
return (
|
|
@@ -78,9 +80,9 @@ return (
|
|
|
78
80
|
)
|
|
79
81
|
```
|
|
80
82
|
|
|
81
|
-
##
|
|
83
|
+
## Avatar position
|
|
82
84
|
|
|
83
|
-
|
|
85
|
+
The `avatarPosition` prop controls which side the avatar appears on. Accepted values are `'left'` (default) and `'right'`.
|
|
84
86
|
|
|
85
87
|
```jsx example
|
|
86
88
|
return (
|
|
@@ -95,7 +97,7 @@ return (
|
|
|
95
97
|
|
|
96
98
|
## Actions
|
|
97
99
|
|
|
98
|
-
|
|
100
|
+
Use the `onPress` prop to make the component interactive. The handler is called when the user taps anywhere on the component.
|
|
99
101
|
|
|
100
102
|
```jsx example
|
|
101
103
|
const [clicked, setClicked] = useState(0)
|
|
@@ -117,7 +119,7 @@ return (
|
|
|
117
119
|
|
|
118
120
|
## Custom status icon
|
|
119
121
|
|
|
120
|
-
You can provide custom components for
|
|
122
|
+
You can provide custom components for status icons using the `statusComponents` prop. Each key in the object maps a status name to a component that renders the corresponding icon.
|
|
121
123
|
|
|
122
124
|
```jsx example
|
|
123
125
|
const AbsentStatus = useCallback(({ style }) => (
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/user",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.19",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -8,15 +8,15 @@
|
|
|
8
8
|
"types": "index.d.ts",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@startupjs-ui/avatar": "^0.1.
|
|
12
|
-
"@startupjs-ui/core": "^0.1.
|
|
13
|
-
"@startupjs-ui/div": "^0.1.
|
|
14
|
-
"@startupjs-ui/span": "^0.1.
|
|
11
|
+
"@startupjs-ui/avatar": "^0.1.19",
|
|
12
|
+
"@startupjs-ui/core": "^0.1.19",
|
|
13
|
+
"@startupjs-ui/div": "^0.1.19",
|
|
14
|
+
"@startupjs-ui/span": "^0.1.19"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": "*",
|
|
18
18
|
"react-native": "*",
|
|
19
19
|
"startupjs": "*"
|
|
20
20
|
},
|
|
21
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "bfcca786dc363f42a09b6eef4feb7ca8139302fc"
|
|
22
22
|
}
|