Cloud-panda-components NPM

React Reusable Components.

first, install cloud panda components using node package manager(npm) #### > npm i cloud-panda-components

Validation	Description
required	Validates that the value must not be empty.
maxLength	It is used to validate the maximum characters of the fields
minLength	It is used to validate the minimum characters of the fields
isEmail	Validates that a value is a valid email address.
isNumeric	Validates that the value is only a number.
alpha	Alphabet only validation .
alphaNum	Validates alpha numeric string value.
sameWith	The given field must match the value you passed under validation
isArray	The value must be a valid array
file{maxSize}	Validates the maximum filesize of the given file
file{extension}	Validates the allowed file types of the given file
custom	Custom validation that uses regular expression/pattern

How to use Validations!

<Input validations={ { required: true } } /> -- Required

<Input validations={ { maxLength: { value: 10 } } } /> -- Limit the maximum length of the input fields

<Input validations={ { minLength: { value: 6 } } } /> -- Minimum character length

<Input validations={ { isNumeric: { value: 10 } } } /> -- Valid numbers only

<Input validations={ { alpha: true } } /> -- Alphabet only

<Input validations={ { alphaNum: true } } /> -- For Alpha Numeric Validations

<Input validations={ { sameWith: {isArray: 'Mangos', 'Apple' } } } /> -- Valid array value only.

<Input validations={ { file: { maxSize: 2000 } } } /> -- Validate maximum size of file.

<Input validations={ { file: { ext: 'docx|png|jpg|jpeg' } } } /> -- Validate allowed extensions for file.

<Input validations={ { custom: { rules: /a-z0-9!#$%&'*+/=?^_`{|}~-+(?:.a-z0-9!#$%&'*+/=?^_`{|}~-+)@(?:a-z0-9(?:a-z0-9-a-z0-9)?.)+a-z0-9?/ } } } /> -- You can set your own validations with the use of regular expression

Props	Description
label	Text of label, default: "No Label"
containerClass	It refers to the container of input and label, default: "form-group"
inputProps	refering to the props of input e.g(placeholder, type)
labelProps	It refers to the properties of label e.g(for, className)
validations	Object property that contains the validations
onChange	It returns your function on onChange event of the input
validate	When set to false, the input will not validate. default: true