REACTANT-MODULARIS
Input
Plain
Prop |
Description |
Type |
Default |
*label |
|
string |
|
value |
|
string |
"" |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
String
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
placeholder |
|
string |
"" |
value |
|
string |
null |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: string } |
null |
disabled |
|
boolean |
false |
readOnly |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
RadioButton
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
value |
|
string |
null |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: string } |
null |
disabled |
|
boolean |
false |
readOnly |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
data |
|
{ value: string, text: string }[] |
[] |
Strings
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
placeholder |
|
string |
"" |
value |
|
string |
[] |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: string[] } |
null |
disabled |
|
boolean |
false |
readOnly |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
separators |
|
string[] |
['\n'] |
Text
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
placeholder |
|
string |
"" |
value |
|
string |
null |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: string } |
null |
disabled |
|
boolean |
false |
readOnly |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
rows |
|
number |
3 |
displayError |
|
boolean |
true |
Number
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
placeholder |
|
string |
"" |
value |
|
number |
null |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: number } |
null |
disabled |
|
boolean |
false |
readOnly |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
min |
|
number |
|
max |
|
number |
|
Checkbox or Switch
Prop |
Description |
Type |
Default |
*id |
|
string |
|
label |
|
string |
|
rightLabel |
|
string |
|
value |
|
boolean |
false |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: boolean } |
null |
disabled |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
Select
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
placeholder |
|
string |
"" |
value |
|
string |
null |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: string } |
null |
disabled |
|
boolean |
false |
readOnly |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
*data |
|
{ text: string, value: string, disabled?: boolean, props?: any }[] |
[] |
multi |
|
boolean |
false |
search |
|
boolean |
false |
allowClear |
|
boolean |
false |
Cascader
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
placeholder |
|
string |
"" |
value |
|
string |
null |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: string } |
null |
disabled |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
*data |
|
{ label: string, value: string, disabled?: boolean, children?: data[] }[] |
[] |
search |
|
boolean |
false |
allowClear |
|
boolean |
false |
Date
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
value |
|
moment |
null |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: moment } |
null |
disabled |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
showTime |
|
boolean |
false |
format |
|
string |
YYYY-MM-DD |
DateRange
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
value |
|
moment[2] |
null |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: moment[2] } |
null |
disabled |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
showTime |
|
boolean |
false |
format |
|
string |
YYYY-MM-DD |
Time
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
value |
|
moment |
null |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: moment } |
null |
disabled |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
format |
|
string |
HH:mm:ss |
Translation
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
placeholder |
|
string |
"" |
value |
|
{ [lang]: string } |
null |
validators |
|
Validator[] |
[] |
onError |
|
(id: string, errors: string[]) => void |
null |
onChange |
|
() => { id: string, value: { [lang]: string }} |
null |
disabled |
|
boolean |
false |
readOnly |
|
boolean |
false |
hint |
|
string |
"" |
formLayout |
|
FormLayout |
|
displayError |
|
boolean |
true |
*langs |
|
string[] |
3 |
Objects
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
value |
|
object[] |
[] |
validators |
|
Validator[] |
[] |
onChange |
|
() => { id: string, value: object[] } |
null |
disabled |
|
boolean |
false |
*config |
|
ModularConfig |
|
*columns |
|
ColumnProps[] |
|
width |
|
string |
"" |
*rowKey |
|
(row) => string |
|
size |
|
`"default" |
"middle" |
tableProps |
|
object |
|
File
Prop |
Description |
Type |
Default |
*id |
|
string |
|
*label |
|
string |
|
value |
|
`File |
|
onChange |
|
`() => { id: string, value: File |
|
disabled |
|
boolean |
false |
multi |
|
boolean |
false |
accept |
|
string |
null |
allowClear |
|
boolen |
true |
buttonProps |
|
any |
null |
Validator
(value) => string
If valid return ""
, otherwise return error message.
BreakPoints
point |
size |
xs |
<576px
|
sm |
>=576px
|
md |
>=768px
|
lg |
>=992px
|
xl |
>=1200px
|
xxl |
>=1600px
|
FormLayout
{
labelCol: {
[BreakPoint]: {
span: number
}
},
wrapperCol: {
[BreakPoint]: {
span: number
}
}
}
Default:
labelCol= xs: 24, sm: 4
wrapperCol= xs: 24, sm: 19