Newlywed Party Monsters

    @gpa-gemstone/react-forms
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.25 • Public • Published

    react-forms

    gemstone logo

    The Gemstone Web Library organizes all Gemstone functionality related to web.

    GitHub license

    This library includes helpful npm package for creating strongly typed form components in react.

    • Input
    • CheckBox
    • TextArea
    • DatePicker
    • Select
    • EnumCheckBoxes
    • DateRangePicker
    • ArrayCheckBoxes
    • ArrayMultiSelect
    • MultiCheckBoxSelect
    • DoubleInput

    Usage

        interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string, EnumField: number, FromField: string, ToField: string}
        let record:iType = {Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021', FromField: '01/01/2020', ToField: '01/01/2021'}
        let options = [{Value: 1, Label: 'first'}, {Value:2, Label: 'second'}]
    
        <Input<iType> Record={record} Field="Field1" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
        <CheckBox<iType> Record={record} Field="Field3" Setter={(event) => record.Field3 = event.target.value}}>
        <Select<iType> Record={record} Field="Field2" Setter={(event) => record.Field3 = event.target.value}} Options={options}>
        <TextArea<iType> Record={record} Field="Field4" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
        <DatePicker<iType> Record={record} Field="Field5" Setter={(event) => record.Field1 = event.target.value}>
        <DateRangePicker<iType> Record={record} FromField="FromField" ToField="ToField" Label="Date Range" Setter={(event) => record.Field1 = event.target.value}>
        <EnumCheckBoxes<iType> Record={record} Field="EnumField" Setter={(event) => record.Field3 = event.target.value}} Enum={['Monday', 'Tuesday','Wednesday']}>
    	<DoubleInput<iType> Record={record} Field1="Field4" Field1="Field5" Setter={(r) => record = r} Valid={(field) => /*some criteria*/}>

    Install

    npm i @gpa-gemstone/react-forms

    DownloadsWeekly Downloads

    131

    Version

    1.1.25

    License

    MIT

    Unpacked Size

    63.9 kB

    Total Files

    30

    Last publish

    Collaborators

    • elwills
    • wbernest
    • clackner-gpa