@selfcommunity/react-ui/lib/cjs/components/UserProfileHeader/UserProfileHeader.d.ts

React UI Components to integrate a Community created with SelfCommunity Platform.

import React from 'react';
import { ChangeCoverProps } from '../ChangeCover';
import { ChangePictureProps } from '../ChangePicture';
import { SCUserType } from '@selfcommunity/types';
export interface UserProfileHeaderProps {
    /**
     * Id of user object
     * @default null
     */
    id?: string;
    /**
     * Overrides or extends the styles applied to the component.
     * @default null
     */
    className?: string;
    /**
     * Id of user object
     * @default null
     */
    userId?: number;
    /**
     * User Object
     * @default null
     */
    user?: SCUserType;
    /**
     * Props to spread change picture button
     * @default {}
     */
    ChangePictureProps?: ChangePictureProps;
    /**
     * Props to spread change cover button
     * @default {}
     */
    ChangeCoverProps?: ChangeCoverProps;
    /**
     *
     */
    actions?: React.ReactNode;
    /**
     * Any other properties
     */
    [p: string]: any;
}
/**
 * > 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 <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UserProfileHeader)

 #### Import

 ```jsx
 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.|

 * @param inProps
 */
export default function UserProfileHeader(inProps: UserProfileHeaderProps): JSX.Element;