Skip to main content

UserProfileHeader

Interfaces

UserProfileHeaderProps

Indexable

[p: string]: any

Any other properties

Properties

PropertyTypeDescription
actions?ReactNode-
ChangeCoverProps?ChangeCoverPropsProps to spread change cover button Default {}
ChangePictureProps?ChangePicturePropsProps to spread change picture button Default {}
className?stringOverrides or extends the styles applied to the component. Default null
id?stringId of user object Default null
user?SCUserTypeUser Object Default null
userId?numberId of user object Default null

Functions

UserProfileHeader()

UserProfileHeader(inProps): 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 NameGlobal classDescription
root.SCUserProfileHeader-rootStyles applied to the root element.
cover.SCUserProfileHeader-coverStyles applied to the cover element.
avatar.SCUserProfileHeader-avatarStyles applied to the avatar element.
infOpsSectionSCUserProfileHeader-infops-sectionStyles applied to the section including info and actions.
infoSCUserProfileHeader-infoStyles applied to the info section.
usernameSCUserProfileHeader-usernameStyles applied to the username element.
realnameSCUserProfileHeader-realnameStyles applied to the realname element.
changePicture.SCUserProfileHeader-change-pictureStyles applied to changePicture element.
changeCover.SCUserProfileHeader-change-cover`Styles applied to changeCover element.

Parameters

ParameterTypeDescription
inPropsUserProfileHeaderProps

Returns

Element


UserProfileHeaderSkeleton()

UserProfileHeaderSkeleton(): 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 NameGlobal classDescription
root.SCUserProfileHeader-skeleton-rootStyles applied to the root element.
avatar.SCUserProfileHeader-avatarStyles applied to the avatar element.
cover.SCUserProfileHeader-coverStyles applied to the cover element.
actions.SCUserProfileHeader-actionsStyles applied to the actions section.
section.SCUserProfileHeader-sectionStyles applied to the info section.
username.SCUserProfileHeader-usernameStyles applied to the username element.

Returns

Element