UserProfileHeader

Interfaces

UserProfileHeaderProps

Indexable

[p: string]: any

Properties

Property	Type	Description
ChangeCoverProps?	ChangeCoverProps	Props to spread change cover button Default {}
ChangePictureProps?	ChangePictureProps	Props to spread change picture button Default {}
actions?	ReactNode	-
className?	string	Overrides or extends the styles applied to the component. Default null
id?	string	Id of user object Default null
user?	SCUserType	User Object Default null
userId?	number	Id of user object Default null

Functions

UserProfileHeader()

UserProfileHeader(inProps): JSX.Element

API documentation for the Community-JS User Profile AppBar component. Learn about the available props and the CSS API.

This component renders the user profile's top section. Take a look at our demo component here

Import

import {UserProfileHeader} from '@selfcommunity/react-ui';

Component Name

The name SCUserProfileHeader can be used when providing style overrides in the theme.

CSS

Rule Name	Global class	Description
root	.SCUserProfileHeader-root	Styles applied to the root element.
cover	.SCUserProfileHeader-cover	Styles applied to the cover element.
avatar	.SCUserProfileHeader-avatar	Styles applied to the avatar element.
infOpsSection	SCUserProfileHeader-infops-section	Styles applied to the section including info and actions.
info	SCUserProfileHeader-info	Styles applied to the info section.
username	SCUserProfileHeader-username	Styles applied to the username element.
realname	SCUserProfileHeader-realname	Styles applied to the realname element.
changePicture	.SCUserProfileHeader-change-picture	Styles applied to changePicture element.
changeCover	.SCUserProfileHeader-change-cover`	Styles applied to changeCover element.

Parameters

Parameter	Type	Description
inProps	UserProfileHeaderProps

Returns

JSX.Element

Source

packages/react-ui/src/components/UserProfileHeader/UserProfileHeader.tsx:122

---

UserProfileHeaderSkeleton()

UserProfileHeaderSkeleton(): JSX.Element

API documentation for the Community-JS User Profile AppBar Skeleton component. Learn about the available props and the CSS API.

Import

import {UserProfileHeaderSkeleton} from '@selfcommunity/react-ui';

Component Name

The name SCUserProfileHeader-skeleton-root can be used when providing style overrides in the theme.

CSS

Rule Name	Global class	Description
root	.SCUserProfileHeader-skeleton-root	Styles applied to the root element.
avatar	.SCUserProfileHeader-avatar	Styles applied to the avatar element.
cover	.SCUserProfileHeader-cover	Styles applied to the cover element.
actions	.SCUserProfileHeader-actions	Styles applied to the actions section.
section	.SCUserProfileHeader-section	Styles applied to the info section.
username	.SCUserProfileHeader-username	Styles applied to the username element.

Returns

JSX.Element

Source

packages/react-ui/src/components/UserProfileHeader/Skeleton.tsx:47