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 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"
     />

    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 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