@adler-it/reactant-modularis

Modular form and dialog for react and atnd.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@adler-it/reactant-modularis
Minified + gzip package size for @adler-it/reactant-modularis in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.