UserProfileEdit
Interfaces
UserProfileEditProps
Indexable
[p: string]: any
Properties
| Property | Type | Description |
|---|---|---|
UserProfileEditSectionAccountProps? | UserProfileEditSectionAccountProps | Props to apply to Account section Default {} |
UserProfileEditSectionPublicInfoProps? | Omit <UserProfileEditSectionPublicInfoProps, "fields"> | Props to apply to PublicInfo section Default {} |
UserProfileEditSectionSettingsProps? | Omit <UserProfileEditSectionPublicInfoProps, "settings"> | Props to apply to Settings section Default {} |
className? | string | Overrides or extends the styles applied to the component. Default null |
fields? | SCUserProfileFields[] | User fields to display in the profile Default [real_name, date_joined, date_of_birth, website, description, bio] |
id? | string | Id of user object Default null |
settings? | SCUserProfileSettings[] | Settings to display in the profile Default [notification, interaction, private_message] |
UserProfileEditSectionAccountProps
Indexable
[p: string]: any
Properties
| Property | Type | Description |
|---|---|---|
AccountCredentialProps? | AccountCredentialProps | Props to apply to Account credential section Default {} |
AccountDeleteButtonProps? | AccountDeleteButtonProps | Props to apply to Account delete button Default {} |
LanguageSwitcherProps? | LanguageSwitcherProps | Props to apply to LanguageSwitcher component Default {} |
className? | string | Overrides or extends the styles applied to the component. Default null |
endActions? | ReactNode | Actions to be inserted after social associations section Default null |
handleAssociationCreate? | (provider: any) => void | Handles create association callback |
showCredentialsSection? | boolean | If true, shows email and password section Default false |
showLanguageSwitcher? | boolean | If true, shows language switcher Default false |
showSocialAccountSection? | boolean | If true, shows social account section Default true |
startActions? | ReactNode | Actions to be inserted before credentials section Default null |
UserProfileEditSectionPublicInfoProps
Indexable
[p: string]: any
Properties
| Property | Type | Description |
|---|---|---|
className? | string | Overrides or extends the styles applied to the component. Default null |
endActions? | ReactNode | Actions to be inserted at the end Default null |
fields? | SCUserProfileFields[] | User fields to display in the profile Default [real_name, date_joined, date_of_birth, website, description, bio] |
id? | string | Id of user object Default null |
onEditFailure? | (editedField?: Record<string, any>) => void | Callback on edit data with error |
onEditSuccess? | (editedField?: Record<string, any>) => void | Callback on edit data with success |
startActions? | ReactNode | Actions to be inserted at the start Default null |
UserProfileEditSectionSettingsProps
Indexable
[p: string]: any
Properties
| Property | Type | Description |
|---|---|---|
className? | string | Overrides or extends the styles applied to the component. Default null |
endActions? | ReactNode | Actions to be inserted at the end Default null |
id? | string | Id of user object Default null |
onEditSuccess? | () => void | Callback on edit data with success |
settings? | SCUserProfileSettings[] | Settings to display in the profile Default [notification, interaction, private_message] |
startActions? | ReactNode | Actions to be inserted at the start Default null |
Functions
UserProfileEdit()
UserProfileEdit(
inProps):JSX.Element
API documentation for the Community-JS User Profile Edit component. Learn about the available props and the CSS API.
This component renders a section composed of different tabs where the user can edit the settings about its public information, account and notifications. Take a look at our demo component here
Import
import {UserProfileEdit} from '@selfcommunity/react-ui';
Component Name
The name SCUserProfileEdit can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCUserProfileEdit-root | Styles applied to the root element. |
| tabs | .SCUserProfileEdit-tabs | Styles applied to the tab elements. |
| tabsContent | .SCUserProfileEdit-tabs-content | Styles applied to tab content elements. |
Parameters
| Parameter | Type | Description |
|---|---|---|
inProps | UserProfileEditProps |
Returns
JSX.Element
Source
packages/react-ui/src/components/UserProfileEdit/UserProfileEdit.tsx:102
UserProfileEditSectionAccount()
UserProfileEditSectionAccount(
props):JSX.Element
Parameters
| Parameter | Type |
|---|---|
props | UserProfileEditSectionAccountProps |
Returns
JSX.Element
Source
packages/react-ui/src/components/UserProfileEdit/Section/Account.tsx:101
UserProfileEditSectionPublicInfo()
UserProfileEditSectionPublicInfo(
props):JSX.Element
Parameters
| Parameter | Type |
|---|---|
props | UserProfileEditSectionPublicInfoProps |
Returns
JSX.Element
Source
packages/react-ui/src/components/UserProfileEdit/Section/PublicInfo.tsx:109
UserProfileEditSectionSettings()
UserProfileEditSectionSettings(
props):JSX.Element
Parameters
| Parameter | Type |
|---|---|
props | UserProfileEditSectionSettingsProps |
Returns
JSX.Element
Source
packages/react-ui/src/components/UserProfileEdit/Section/Settings.tsx:66
UserProfileEditSkeleton()
UserProfileEditSkeleton():
JSX.Element
API documentation for the Community-JS User Profile Edit Skeleton component. Learn about the available props and the CSS API.
Import
import {UserProfileEditSkeleton} from '@selfcommunity/react-ui';
Component Name
The name SCUserProfileEdit-skeleton-root can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCUserProfileEdit-skeleton-root | Styles applied to the root element. |
Returns
JSX.Element
Source
packages/react-ui/src/components/UserProfileEdit/Skeleton.tsx:36