@licuido-ui/ui_render-form
v0.0.4
Published
Created a React component, Render Form that reder group of input fields with validations
Readme
RenderForm
Created a React component, Render Form that reder group of input fields with validations
Author
- @author Hariharan [email protected]
Link
PlayGround
Installation
npm i @licuido-ui/ui_render-formImport component
import { RenderForm } from '@licuido-ui/ui_render-form';Usage
<RenderForm formList={[]} />Image
Sample Code
<RenderForm
formButtonContainerStyle={{}}
gridStyle={{}}
gridContainerProps={{ columnSpacing: 3, spacing: 0 }}
defaultValues={undefined}
yupSchemaValidation={undefined}
submitButton={{
visible: true,
title: 'Save',
onClick: (data: object) => console.log(data),
sx: {},
}}
formList={ [
{
type: 'heading',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 12,
md: 12,
lg: 12,
lx: 12,
},
inputProps: {
value: 'Basic Details',
sx: {
fontSize: '16px',
color: '#111111',
fontWeight: '500',
margin: '0 0 8px 0',
},
},
},
{
type: 'input',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
type: 'text',
label: 'First Name',
name: 'firstName',
labelVariant: 'standard',
},
},
{
type: 'input',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
type: 'text',
label: 'Last Name',
name: 'lastName',
labelVariant: 'standard',
rules: {
required: 'Please enter Last name',
minLength: {
value: 5,
message: 'min length is 4',
},
maxLength: {
value: 15,
message: 'min length is 14',
},
},
},
},
{
type: 'date',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
type: 'text',
label: 'DOB',
name: 'dob',
labelVariant: 'standard',
rules: {
required: 'Please enter DOB',
},
inputFormat: 'dd-MM-yyyy',
},
},
{
type: 'chipSelect',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
label: 'Gender',
name: 'gender',
labelVariant: 'standard',
rules: {
required: 'Please enter Gender',
minLength: {
value: 5,
message: 'min length is 4',
},
maxLength: {
value: 15,
message: 'min length is 14',
},
},
options: [
{ label: 'Male', value: 'Male' },
{ label: 'Female', value: 'Female' },
{ label: 'Others', value: 'Others' },
],
},
},
{
type: 'dropDown',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
type: 'text',
label: 'Designation',
name: 'designation',
labelVariant: 'standard',
rules: {
required: 'Please enter Designation',
},
selectOption: [
{ label: 'Developer', value: 'Developer' },
{ label: 'Designer', value: 'Designer' },
{ label: 'designation', value: 'designation' },
],
},
},
{
type: 'heading',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 12,
md: 12,
lg: 12,
lx: 12,
},
inputProps: {
value: 'Contact Information',
sx: {
fontSize: '16px',
color: '#111111',
fontWeight: '500',
margin: '18px 0 8px 0',
},
},
},
{
type: 'mobileNumberInput',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
label: 'Mobile Number',
name: 'mobileNumber',
labelVariant: 'standard',
required: true
},
},
{
type: 'input',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
type: 'text',
label: 'Email ID',
name: 'email',
labelVariant: 'standard',
rules: {
required: 'Please enter Email',
minLength: {
value: 5,
message: 'min length is 4',
},
maxLength: {
value: 15,
message: 'min length is 14',
},
},
errorMessage: 'Please enter Email Id',
},
},
{
type: 'input',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
type: 'text',
label: 'Address Line 1',
name: 'address1',
labelVariant: 'standard',
rules: {
required: 'Please enter Address 1',
minLength: {
value: 5,
message: 'min length is 4',
},
maxLength: {
value: 15,
message: 'min length is 14',
},
},
errorMessage: 'Please enter Address Line 1',
},
},
{
type: 'input',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
id: 'address2',
type: 'text',
label: 'Address Line 2',
name: 'address2',
labelVariant: 'standard',
rules: {
required: 'Please enter Address 2',
minLength: {
value: 5,
message: 'min length is 4',
},
maxLength: {
value: 15,
message: 'min length is 14',
},
},
errorMessage: 'Please enter Address Line 2',
},
},
{
type: 'custom',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
component: <BasicButton type='button'>Custom Com</BasicButton>,
},
]}
/>Props
| Name | Description | Default | Control | | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- | | id | string | string | string | | formList | formProps[] | [] | RAWformList : [] | | formButtonContainerStyle | SxProps<{}> | - | RAWformButtonContainerStyle : {} | | gridStyle | SxProps<{}> | { } | RAWgridStyle : {} | | gridContainerProps | SystemProps<Theme> & { children?: ReactNode; classes?: Partial<GridClasses>; columns?: ResponsiveStyleValue<number>; ... 8 more ...; zeroMinWidth?: boolean; } & RegularBreakpoints & CommonProps & Omit<...> | { } | RAWgridContainerProps : {columnSpacing : 3spacing : 0} | | defaultValues | object | - | Set object | | yupSchemaValidation | Resolver<FieldValues, any> | - | Set object | | submitButton | { [key: string]: unknown; visible?: boolean; title?: string; onClick?: (data: object) => void; sx: SxProps<{}>; } | - | RAWsubmitButton : {visible : truetitle : "Save"onClick : (data) => console.log(data)sx : {...} 0 keys} | | cancelButton | { [key: string]: any; visible?: boolean; title?: string; onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; sx?: SxProps<{}>; } | - | RAWcancelButton : {visible : truetitle : "Cancel"onClick : (data) => console.log(data)sx : {...} 0 keys} | | customButton | { component: React.ReactNode; } | - | RAWcustomButton : {component : {...} 7 keys} | | className | string | - | Set string | | sx | SxProps<Theme> | - | Set object |