Viewer
The Viewer component is a versatile and customizable UI element designed to showcase user profiles, information, or forms with a modern and consistent look. It's built using the Material-UI library and offers flexible configuration options to suit a variety of use cases.
npm i @licuido-ui/ui_viewer
Author
Link
Story Book Link EmptyPage
PlayGround
Try it have a fun codeBox
Import component
import { Viewer } from '@licuido-ui/ui_viewer';
Usage
<Viewer rootStyle= { backgroundColor: '' }
headerOptions= {
title: 'My Profile',
fontSize: '20px',
fontWeight: 'bold',
color: '#111111',
titleBoxStyle: { backgroundColor: '' },
}
viewBody= {
viewBodyStyle: {},
gridStyle: { justifyContent: 'center' },
profileimage: {
breakpoints: { xs: 12, sm: 3.5, md: 3, lg: 2 },
profileImgStyle: {},
imgSrc: '',
variant: 'rounded',
profileimgContainer: {},
avatarconStyle: {},
profileImgEditStyle: {},
profileImgEditIcon: <EditIcon color='#fff' />,
onClick: () => {
console.log('Profile Edit');
},
},
form: {
breakpoints: { xs: 12, sm: 6, md: 6, lg: 4.5, xl: 4.5 },
title: 'Michael Bloomberg',
subTitle: 'Male',
description: 'Senior Graphic Designer',
titleStyle: {},
descriptionStyle: {},
subTitleStyle: {},
formContainer: {},
formList: [
{
icon: <DocsIcon color='#665CD7' />,
label: 'Email',
value: 'Michaelbloomberg@email.com',
breakPoint: {
xs: 12,
sm: 12,
md: 12,
lg: 12,
lx: 12,
},
iconStyle: { backgroundColor: '#FAFAFA' },
labelStyle: {},
valueStyle: {},
listWraper: { py: 1 },
},
{
icon: <DocsIcon />,
label: 'Date Of Birth',
value: '01/06/1990',
breakPoint: {
xs: 12,
sm: 12,
md: 12,
lg: 12,
lx: 12,
},
iconStyle: { backgroundColor: '#FAFAFA' },
labelStyle: {},
valueStyle: {},
listWraper: { py: 1 },
},
{
icon: <DocsIcon />,
label: 'Mobile Number',
value: '+1 9999999999',
breakPoint: {
xs: 12,
sm: 12,
md: 12,
lg: 12,
lx: 12,
},
iconStyle: { backgroundColor: '#FAFAFA' },
labelStyle: {},
valueStyle: {},
listWraper: { py: 1 },
},
{
icon: <DocsIcon />,
label: 'Desgination',
value: 'Developer',
breakPoint: {
xs: 12,
sm: 12,
md: 12,
lg: 12,
lx: 12,
},
iconStyle: { backgroundColor: '#FAFAFA' },
labelStyle: {},
valueStyle: {},
listWraper: { py: 1 },
},
],
},
btnList: [
{
buttonText: 'Edit',
onClick: () => {
console.log('Edit');
},
breakPoint: {
xs: 12,
sm: 12,
md: 12,
lg: 12,
lx: 12,
},
btnStyle: { backgroundColor: '#665CD7' },
btnListConStyle: { mt: 3, display: 'flex', justifyContent: 'center' },
},
],
} />
Image
Variant1
Variant2
Props
| Prop Name | Type | Description | Default Value |
|---|
id | string | A unique identifier for the component. | 'viewer' |
className | string | Overrides or extends the applied styles. | '' |
sx | SxProps | System overrides and additional CSS styles. | {} |
rootStyle | object | Wrapping style for the viewer. | {} |
viewBody | object | Configuration for the content displayed below the header. | {} |
headerOptions | object | Header properties for the profile viewer. | {} |
viewBody Configuration:
| Prop Name | Type | Description | Default Value |
|---|
viewBodyStyle | object | Style for the content area. | {} |
gridStyle | object | Style for the grid splitting the profile image and content area. | {} |
profileimage | object | Configuration for the profile image section. | {} |
form | object | Configuration for the profile detail area. | {} |
btnList | array | List of buttons to be displayed. | [] |
profileimage Configuration:
| Prop Name | Type | Description | Default Value |
|---|
breakpoints | object | Breakpoints for different screen sizes. | {} |
profileImgStyle | object | Styles for the profile image. | {} |
imgSrc | string or any | Path or source of the profile image. | '' |
variant | 'circular' | 'rounded' | 'square' | Profile image variant. | 'rounded' |
profileimgContainer | object | Container styles for the profile image. | {} |
profileImgEditIcon | React.ReactNode or any | Icon for editing or removing the profile image. | <></> |
customComp | React.ReactNode or any | Custom component to be displayed. | <></> |
avatarconStyle | object | Styles for the avatar container. | {} |
profileImgEditStyle | object | Styles for the background of the edit icon. | {} |
onClick | () => void | Callback fired when the profile image is clicked. | () => undefined |
form Configuration:
| Prop Name | Type | Description | Default Value |
|---|
breakpoints | object | Breakpoints for different screen sizes. | {} |
title | string | Profile title. | '' |
subTitle | string | Profile subtitle. | '' |
description | string | Description of the profile. | '' |
titleStyle | object | Styles for the title. | {} |
descriptionStyle | object | Styles for the description. | {} |
subTitleStyle | object | Styles for the subtitle. | {} |
formContainer | object | Overall container styles for the form content. | {} |
formListContainer | object | Container styles for the list of profile data. | {} |
formList | array | List of profile data like name, email, etc. | [] |
formList Configuration:
| Prop Name | Type | Description | Default Value |
|---|
breakPoint | object | Breakpoints for different screen sizes. | {} |
icon | React.ReactNode or any | Icon for the profile data. | <></> |
iconStyle | object | Styles for the icon. | {} |
label | string | Label for the profile data. | '' |
labelStyle | object | Styles for the label. | {} |
value | string | Value for the profile data. | '' |
valueStyle | object | Styles for the value. | {} |
customComp | React.ReactNode or any | Custom component to be displayed. | <></> |
btnList Configuration:
| Prop Name | Type | Description | Default Value |
|---|
breakPoint | object | Breakpoints for different screen sizes. | {} |
buttonText | string | Text to display on the button. | '' |
btnStyle | object | Styles for the button. | {} |
onClick | () => void | Callback function to execute when the button is clicked. | () => undefined |
headerOptions Configuration:
| Prop Name | Type | Description | Default Value |
|---|
title | string | Main title for the profile viewer. | '' |
fontSize | string | Font size for the header. | '' |
fontWeight | string | Font weight for the header. | '' |
color | string | Color of the header. | '' |
titleBoxStyle | object | Header container style. | {} |