react-ui-forms
How to install
npm i react-ui-forms --save
How to import
For TypeScript usage there is a index.d.ts in node_modules folder
;;;;;;;;;;;
or
var ReactUiForms = ;var ValidationType = ;var UITextArea = ;var UICountrySelector = ;var UIFormSelector = ;var UICardExpiryInput = ;var UIPaymentCardInput = ;var UITextInput = ;var UiFormCheckbox = ;var UIFormMessage = ;var UIFormMessageType = ;
Also use css and images in a public folder in:
node_modules/react-ui-forms/public/....
How to use
- ReactUiForms
Props
className
: string;onSubmitValid
: (model: any) => void; (required)onSubmitInvalid
: (model: any, invalidModel: {
}) => void;
resetOnSubmitValid
: boolean;
ValidationType -enum
REQUIRED
MIN_LENGTH
MAX_LENGTH
EMAIL
SAME_AS
CARD
CARD_SIMPLE
CARD_EXPIRY
PERFECTMONEY
WEBMONEY
DCPAY
PHONE_NUMBER
REG_EXP
<ReactUiForms = => // Form elements here..</ReactUiForms>
- UIFormMessage
message
: string;type
: UIFormMessageType;onClose
: () => void;
UIFormMessageType - enum
SUCCESS
ERROR
<UIFormMessage ="Test message success" =/><UIFormMessage ="Test message error" =/>
- UITextInput
Props
message
: string;name
: string;type
?: string;value
?: string;placeholder
?: string;proxyValueName
?: string;validationTypes
?: ValidationType[];validationParams
?: any;validateOnChange
?: boolean;onChange
?: (value: string) => void;onEvent
?: (event: any) => void;invalidateMessage
?: string;
<UITextInput ="first" ="text" ="Some text here..." =/>
- UiFormCheckbox
Props
liner
?: boolean;faded
?: boolean;checked
: boolean;label
?: any;formatLabel
?: FormatLabel;name
: string;onChange
: (checked: boolean) => void;
<UiFormCheckbox = = ="chk2" ="Label 1" =/>
- UIPaymentCardInput
Props
name
: string;type
?: string;value
?: string;placeholder
?: string;proxyValueName
?: string;validateOnChange
?: boolean;onChange
?: (value: string) => void;simpleValidation
?: boolean;
<UIPaymentCardInput ="cardtest" ="4276 0000 0000 0000"/>
- UICardExpiryInput
Props
name
: string;type
?: string;value
?: string;placeholder
?: string;proxyValueName
?: string;validateOnChange
?: boolean;onChange
?: (value: string) => void;
<UICardExpiryInput ="cardexpiry" ="07 / 17"/>
- UIFormSelector
Props
message
: string;items
: UIFormSelectorItem[];defKey
: any;onChange
: (key: any) => void;search
?: boolean;searchPlaceholder
?: string;searchEmptyMessage
?: string;placeholder
?: string;globalPositionedDropdown
?: boolean;maxHeightItems
?: number;
UIFormSelectorItem
key
: any;value
: string;
<UIFormSelector = = =/>
- UIColorSelector
Props
message
: string;items
?: UIFormColorItem[];defKey
: string;onChange
: Function;globalPositionedDropdown
?: boolean;placeholder
?: string;
UIFormColorItem
key
: string;value
: string;
<UIColorSelector = =/>
- UICountrySelector
Props
message
: string;isSng
?: boolean;defKey
: any;onChange
: (key: any) => void;placeholder
?: string;maxHeightItems
?: number;iconsPath
?: string;
<UICountrySelector = = ="https://static.expertoption.com/flags/svg/4x3/"/>
- UIPhoneInput
Props
message
: string;name
: string;type
?: string;value
?: string;isSng
?: boolean;placeholder
?: string;proxyValueName
?: string;validateOnChange
?: boolean;onChange
?: (value: string) => void;phoneDefaultCountrySNG
?: string;phoneDefaultCountryGlobal
?: string;iconsPath
?: string;
<UIPhoneInput ="phone" ="./flags/svg/4x3/" =/>
- UITextArea
Props
message
: string;name
: string;value
?: string;placeholder
?: string;validationTypes
?: ValidationType[];validationParams
?: any;validateOnChange
?: boolean;proxyValueName
?: string;
<UITextArea ="text-area"/>
- Button
Use special class for buttons
btn-success
btn-primary
btn-reset
btn-danger
btn-violet
btn-google
btn-facebook
btn-tw
small
full
half-left
half-right
loading
<button ="btn btn-success" ="submit">Button</button>
For development
just use:
- $ yarn or $ npm i
- $ gulp
open your browser http://localhost:3000
For Build
$ ./production