Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "elements"

Index

Type aliases

TypeSelectCssSizeName

TypeSelectCssSizeName: "sm" | "default" | "lg"

Variables

Const FileField

FileField: ForwardRefExoticComponent<{} & RefAttributes<unknown>> = React.forwardRef((props: IFileField, ref: React.RefObject<HTMLFormElement>|any) => {let _props = {...props, ref };const file = new _FileField<IFileField>(FIELD_NAMES.FILE, _props);return file.create();})

The SubmitButton only requires a text string as children props (see below example). The SubmitButton will be disabled until all form fields are validated.

param

ISubmitButtonProps

example
import {SubmitButton} from "react-base-forms";

<SubmitButton>Submit</SubmitButton>

Const SubmitButton

SubmitButton: (Anonymous function) = new _SubmitButton().create()

Functions

Const CheckBoxField

  • The CheckBoxField requires a checked prop instead of a value prop. See ICheckBoxField.

    example
    // A bare form example ... remember to set the {@link Form.bare} property to `true`
     import {CheckBoxField} from "react-base-forms";
    
     const state = { password: "", confirmPassword: "" };
    
    <CheckBoxField
      name="terms"
      checked={state.terms}
    />
    
    // Example with Bootstrap styling (Bootstrap styling comes as default)
    <CheckBoxField
      name="terms"
      checked={state.terms}
      hint="Click to agree"
      labeltext="Agree to terms & conditions"
    />

    Parameters

    Returns Element

Const DatePickerField

  • description

    A Date picker with optional validation

    example
       <DatePickerField
           value={fpState.date}
           name="date"
           datePickerClassNames="yourClassnames"
           // Optional validators
           validators={[isValidDate(["2021-01-10", "2021-03-10"])]}
       />

    Parameters

    Returns Element

Const EmailField

  • example
     import {EmailField} from "react-base-forms"
    
     const state = { email: "" }
    
    // A bare form example ... remember to set the {@link Form.bare} property to `true`
    <EmailField
       value={state.email}
       name="email"
    />
    
    // Example with Bootstrap styling (Bootstrap styling comes as default)
    
    <EmailField
       value={state.email}
       name="email"
       hint="Needs to be at least 50 characters long"
       labeltext="Username"
     />

    There is a bug when working with React & input fields. See https://github.com/facebook/react/issues/955 We have provided a fix for TextInputField and PasswordField fields but not EmailField fields. If you wish to avoid the cursor jumping bug, then use a TextInputField with the isEmailValid validator. For example:

       <TextInputField
          value={state.email}
          name="Must be a valid email"
          labeltext="Email"
         validators={[isEmailValid()]}
       />

    Parameters

    Returns Element

Const PasswordField

  • The PasswordField works the same as the EmailField & TextInputField's.

    example
     import {areFieldsEqual, isFieldEmpty, PasswordField} from "react-base-forms";
    
     const state = { password: "", confirmPassword: "" };
    
    // A bare form example ... remember to set the {@link Form.bare} property to `true`
    <PasswordField
       value={state.password}
       name="username"
       validators={[isFieldEmpty(8)]}
    />
    
    // Example with Bootstrap styling (Bootstrap styling comes as default)
    
    <PasswordField
       value={state.confirmPassword}
       name="password"
       hint="Needs to be at least 8 characters long"
       labeltext="Password"
     />

    Also we can create two PasswordField components to confirm passwords are equal. Please see areFieldsEqual for more info. The first PasswordField has has a name prop of password & the second PasswordField a name prop of confirmPassword*. Then we can add a areFieldsEqual validator to the *PasswordField with the confirmPassword name props (also notice how areFieldsEqual takes the first PasswordField name as an argument).

    example
    <PasswordField
     name="password"
     // other props...
    
    />
    
    <PasswordField
     name="confirmPassword"
     // other props...
     validators={[areFieldsEqual("password")]}
    />

    Parameters

    Returns Element

Const QueryInputField

  • example

    This field provides a list of options to select from using the onChange event. IQueryField.queryresults is the an array of objects (usually returned from a remote api) IQueryField.objectkey is the key of the value you require to display when the user begins to type

     let fruitState = [{name: "peach"},{name: "plum"}]
    
     <QueryInputField
         value={fpState.fruit}
         name="fruit"
         hint="Enter your Fruit"
         labeltext="fruit"
         validators={[isFieldEmpty(2)]}
         queryresults={fruitState}
         objectkey="name"
     />

    Parameters

    Returns Element

Const RadioField

  • example
     import {isRadioChecked, RadioField, RadioGroup} from "react-base-forms";
    
     const state = { male: true, female: false };
    
     <RadioGroup name="group1">
       <RadioField
         name="male"
         checked={state.male}
         hint="Click to agree"
         labeltext="Agree to terms & conditions"
       />
    
       <RadioField
         name="female"
         checked={state.female}
         hint="Click to agree"
         labeltext="Agree to terms & conditions"
         validators={[isRadioChecked()]}
       />
    
     </RadioGroup>

    Parameters

    Returns Element

RadioGroup

  • props

    IRadioGroupProps

    example
     import {CheckBoxField} from "react-base-forms";
    
     const state = { male: true, female: false };
    
     <RadioGroup name="group1">
       // place RadioFields components here...
     </RadioGroup>

    Parameters

    • props: IRadioGroupProps

      The RadioGroup component takes a single props of name, which must be a unique to a form. See RadioField.

    Returns Element

Const SelectField

  • A component to render a select field element.

    example
     import {SelectField} from "react-base-forms";
    
     const state = { fruitChoice: "" };
    
    <SelectField
      size="lg"
      value={state.fruitChoice}
      name="fruitChoice"
      options={["banana", "apple", "orange"]}
     />

    You can also pass an array of objects but you must use both the objectKey & objectvalue props. the objectKey will update your state value & the objectvalue is what is displayed to the user as an option.

    example
    // This is your option data
    let selectData = [
      {id: 1, name: "first"},
      {id: 2, name: "second"},
    ];
    // The state which will receive the update
    let state = {
       select_data_id: undefined as any,
    };
    
    <SelectField
      size="lg"
      value={state.select_data_id}
      name="fruitChoice"
      objectkey="id" // Value will update state.select_data_id e.g *1, 2...*
      objectvalue="name" // Value will be displayed in the select field e.g *first, second...*
      options={selectData}
    />

    Parameters

    Returns Element

Const TextAreaField

  • The TextAreaField takes in an extra prop of row which is a number & declares the number of rows displayed by the textarea element. The TextAreaField accepts all the IField props.

    example
     *  import {CheckBoxField} from "react-base-forms";
    
     const state = { about: "" };
    // A bare form example ... remember to set the {@link Form.bare} property to `true`
    <TextAreaField
       value={state.about}
       name="about"
       validators={[isFieldEmpty(20)]}
    />
    
    // Example with Bootstrap styling (Bootstrap styling comes as default)
    
    <TextAreaField
       name="about"
       value={state.about}
       hint="Must be at least 20 characters"
       labeltext="About you..."
       validators={[isFieldEmpty(20)]}
    />

    Parameters

    Returns Element

Const TextInputField

  • example
     import {TextInputField} from "react-base-forms"
    
     const state = { username: "" }
    
    // A bare form example ... remember to set the {@link Form.bare} property to `true`
    <TextInputField
       value={state.username}
       name="username"
    />
    
    // Example with Bootstrap styling (Bootstrap styling comes as default)
    
    <TextInputField
       value={state.username}
       name="username"
       hint="Needs to be at least 50 characters long"
       labeltext="Username"
     />

    Parameters

    Returns Element

Generated using TypeDoc