1.3.0 • Published 2 years ago
abraa-ka-dabraa v1.3.0
abraa-ka-dabraa
Abraa ka dabraa form can make your mind blast
Install
npm install abraa-ka-dabraaUsage
This is a universal form where we can implement a number of form field without using any html tags. This comes with all dynamic and user friendly UI . You just need to import llamaaForm from abraa-ka-dabra and that all.
Below are some example or usages of llamaForm
1- Want to make a text Field with all validation.
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
return <LlamaForms
schema={{
properties: {
Name: {
type: 'string',
required: true,
},
}
}}
options={{
type: 'object',
fields: {
Name: {
type: 'text',
label: 'Name',
placeholder: "Enter your name",
description: "This is Name field",
errorMessage: "",
readOnly: false,
maxLength: 30,
autoFocus: true,
autoComplete: true,
}
}
}}
/>
}2- Want to make a Login Page with all validation. Here llamaForms make your work more easy.
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
const login_test = (data) => {
console.info("You have Successfully Login",data)
}
return <LlamaForms
schema={{
type: 'object',
title: 'Login',
description: 'Login Form',
properties: {
email: {
type: 'string',
required: true,
enum: "",
},
password: {
type: 'string',
required: true,
enum: "",
}
}
}}
options={{
type: 'object',
fields: {
email: {
type: 'email',
label: 'Email',
placeholder: "Enter your name",
description: "This is email field",
validationRegax: "^[a-z0-9]+@[a-z]+\.[a-z]{2,3}",
errorMessage: "",
readOnly: false,
maxLength: 30,
autoFocus: true,
autoComplete: true,
},
password: {
type: 'password',
label: 'Password',
placeholder: "Enter your password",
description: "This is passsword field",
},
}
}}
onSubmit={login_test}
/>
}If you want to make the login form in stepwise then you can just add step to each of the property in the property field
<>
properties: {
email: {
type: 'string',
required: true,
enum: "",
step: 1
},
password: {
type: 'string',
required: true,
enum: "",
step: 2
}
}
</>3- You can add default values to the field by just using the data attributes
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
const login_test = (data) => {
console.info("You have Successfully Login",data)
}
return <LlamaForms
schema={{
type: 'object',
title: 'Login',
description: 'Login Form',
properties: {
email: {
type: 'string',
required: true,
enum: "",
},
password: {
type: 'string',
required: true,
enum: "",
}
}
}}
options={{
type: 'object',
fields: {
email: {
type: 'email',
label: 'Email',
placeholder: "Enter your name",
description: "This is email field",
validationRegax: "^[a-z0-9]+@[a-z]+\.[a-z]{2,3}",
errorMessage: "",
readOnly: false,
maxLength: 30,
autoFocus: true,
autoComplete: true,
},
password: {
type: 'password',
label: 'Password',
placeholder: "Enter your password",
description: "This is passsword field",
},
}
}}
data={{
email: 'llama@test.com',
password: '123456'
}}
onSubmit={login_test}
/>
}4- You can add color box
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
return <LlamaForms
schema={{
properties: {
color: {
type: "string",
required: false,
},
}
}}
options={{
type: 'object',
fields: {
color: {
type: "color",
label: "Color",
description: "This is color field",
readOnly: false,
},
}
}}
/>
}5- You can add color box
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
return <LlamaForms
schema={{
properties: {
color: {
type: "string",
required: false,
},
}
}}
options={{
type: 'object',
fields: {
color: {
type: "color",
label: "Color",
description: "This is color field",
readOnly: false,
},
}
}}
/>
}6- You can add file upload box
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
return <LlamaForms
schema={{
properties: {
image: {
type: 'string',
required: true,
},
}
}}
options={{
type: 'object',
fields: {
image: {
type: 'file',
label: 'Image',
description: "This is image field",
required: true,
errorMessage: "Please input jpg, png, jpeg only",
readOnly: false,
maxFileSize: 10000,
minFileSize: 1,
accept: ["jpg", "png", "jpeg"],
}
}
}}
/>
}7- You can add Range bar
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
return <LlamaForms
schema={{
properties: {
dataRange: {
type: "string",
required: true,
},
}
}}
options={{
type: 'object',
fields: {
dataRange: {
type: "range",
label: "Range",
errorMessage: "",
readOnly: false,
maxLength: 30,
autoFocus: true,
autoComplete: true,
min: 0,
max: 200,
interval: 10,
},
}
}}
/>
}8- You can add date and time box
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
return <LlamaForms
schema={{
properties: {
date: {
type: 'string',
required: true,
},
currentTime: {
type: 'string',
required: true,
},
}
}}
options={{
type: 'object',
fields: {
date: {
type: "date",
label: "DOB",
value: "1997-02-01",
errorMessage: "",
readOnly: false,
autoFocus: false,
autoComplete: true,
},
currentTime: {
type: "time",
label: "Current Time",
description: "This is a time field",
readOnly: false,
autoFocus: false,
autoComplete: true,
},
}
}}
/>
}9- You can add textarea box
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
return <LlamaForms
schema={{
properties: {
details: {
type: 'string',
required: true,
},
}
}}
options={{
type: 'object',
fields: {
details: {
type: "textarea",
label: "Details",
description: "This is details field",
placeholder: "Write......",
errorMessage: "",
readOnly: false,
autoFocus: true,
autoComplete: true,
},
}
}}
/>
}10- You can add color box
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
return <LlamaForms
schema={{
properties: {
gender: {
type: 'string',
required: true,
enum: {
Male: 'male',
Female: 'female',
Unknown: 'unknown'
},
},
}
}}
options={{
type: 'object',
fields: {
gender: {
type: "dropdown",
label: "Gender",
description: "Select Your Gender",
placeholder: "Select Your Gender",
autofocus: true,
readOnly: false,
},
}
}}
/>
}11- You can add question box
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
return <LlamaForms
schema={{
properties: {
question: {
type: 'string',
required: true,
step: 4,
enum: ['yes', 'no', 'I dont know'],
},
}
}}
options={{
type: 'object',
fields: {
question: {
type: 'radio',
label: "This is an amazing form builder. Do you like it?",
description: "This is radio field",
readOnly: false,
},
}
}}
/>
}12- Here is a complete login with feedback page made with llamaforms
import {LlamaForms} from 'abraa-ka-dabraa'
export default function Example()
{
const login_test = (data) => {
console.log("login", data)
}
return <LlamaForms
schema={{
type: 'object',
title: 'Login',
description: 'Login Form',
wizard: true,
properties: {
email: {
type: 'string',
required: true,
enum: "",
step: 1,
},
password: {
type: 'string',
required: true,
enum: "",
step: 2,
},
details: {
type: 'string',
required: true,
},
color: {
type: "string",
required: false,
},
image: {
type: 'string',
required: true,
step: 1,
},
dataRange: {
type: "string",
required: true,
step: 3
},
question: {
type: 'string',
required: true,
step: 4,
enum: ['yes', 'no', 'I dont know'],
},
gender: {
type: 'string',
required: true,
enum: {
Male: 'male',
Female: 'female',
Unknown: 'unknown'
},
step: 5,
},
dob: {
type: 'string',
required: true,
},
currentTime: {
type: 'string',
required: true,
},
feedback: {
type: 'string',
required: true,
enum: ["You are good", "You have a good sense", "Maybe", "Also I am confused"]
},
}
}}
options={{
type: 'object',
fields: {
email: {
type: 'email',
label: 'Email',
placeholder: "Enter your name",
description: "This is email field",
validationRegax: "^[a-z0-9]+@[a-z]+\.[a-z]{2,3}",
errorMessage: "",
readOnly: false,
maxLength: 30,
autoFocus: true,
autoComplete: true,
},
details: {
type: "textarea",
label: "Details",
description: "This is details field",
placeholder: "Write......",
errorMessage: "",
readOnly: false,
autoFocus: true,
autoComplete: true,
},
password: {
type: 'password',
label: 'Password',
placeholder: "Enter your password",
description: "This is passsword field",
},
color: {
type: "color",
label: "Color",
description: "This is color field",
readOnly: false,
},
dataRange: {
type: "range",
label: "Range",
errorMessage: "",
readOnly: false,
maxLength: 30,
autoFocus: true,
autoComplete: true,
min: 0,
max: 200,
interval: 10,
},
image: {
type: 'file',
label: 'Image',
description: "This is image field",
required: true,
errorMessage: "Please input jpg, png, jpeg only",
readOnly: false,
maxFileSize: 10000,
minFileSize: 1,
accept: ["jpg", "png", "jpeg"],
},
question: {
type: 'radio',
label: "This is an amazing form builder. Do you like it?",
description: "This is radio field",
readOnly: false,
},
gender: {
type: "dropdown",
label: "Gender",
description: "Select Your Gender",
placeholder: "Select Your Gender",
autofocus: true,
readOnly: false,
},
dob: {
type: "date",
label: "DOB",
value: "1997-02-01",
errorMessage: "",
readOnly: false,
autoFocus: false,
autoComplete: true,
},
currentTime: {
type: "time",
label: "Current Time",
description: "This is a time field",
readOnly: false,
autoFocus: false,
autoComplete: true,
},
}
}}
data={{
email: 'mobashir@gmail.com',
password: '123456',
question: "yes",
dataRange: 50,
}}
onSubmit={login_test}
/>
}Props Available In Abraa-ka-dabraa
Main props in Abraa-ka-dabraa
> schema: It is the base part of the form where you can give a name, title, description to your form
> option: This is the use to control the form . It is responsible for making your form more meaningful
> data: Data can be use if you want some default value on your field while loading and it also act as remember me in your form
> onSubmit: this is a call back which accept a params for accepting the input values you provide in uiSchema has the following props
> type:
> title: This is to give your form a title
> description: This is to give your form a description
> wizard: This is for making a dropdown multiple. If it is true then the dropdown is multiple, by default it is false
> properties: This will carry your dynamic custom field Properties has the following props
> required: This is for making a field as required , by default it is false
> enum:
> step: This is to make a form multi page, if you want to divide your page in multiple page then you can give the number of the page you want show , this accept only numberOptions has the following props
> type:
> fields: It is to make your fields more dynamic and usefulFields has the following props
> type: This is for making fields of different types. It has email,textarea,password,color,range,file,radio,dropdown,date,time
> label: It is use to give a name to a field
> placeholder: This is a placeholder for text field
> description:
> validationRegax: This is for your field validation regax
> errorMessage: It returns a string as an error message
> readOnly: this is to make a field as read only
> maxLength: This is for making a text field max length
> autoFocus: This is to make a field on focus while the page is active
> autoComplete: This is for giving suggestion of your history data to autocomplete
> maxFileSize: This props is used only in type file case where we can set the max size of file before upload
> minFileSize: This props is used only in type file case where we can set the min size of file before upload
> min: This is the props which is used only in type range where we can set a min for the range
> max: This is the props which is used only in type range where we can set a max for the range
> interval:
> accept: This is used only for file type where we can accept a particular extension file, ex - ["jpg", "png", "jpeg"]License
MIT © Shaikh Mehboob Ali
1.3.0
2 years ago
1.2.0
2 years ago
1.1.0
2 years ago
3.15.0
2 years ago
3.14.0
2 years ago
3.13.0
2 years ago
3.12.0
2 years ago
3.11.0
2 years ago
3.10.0
2 years ago
3.9.0
2 years ago
3.8.0
2 years ago
4.0.0
2 years ago
3.7.0
2 years ago
3.6.0
2 years ago
3.5.0
2 years ago
3.4.0
2 years ago
3.3.0
2 years ago
3.2.0
2 years ago
3.1.0
2 years ago
3.0.0
2 years ago
2.0.0
2 years ago
1.0.0
2 years ago