import React,{useState} from "react";
      import { FormGroup, FormText, Input, Label } from "reactstrap";
      
      function BaseTextInput({
        label,
        placeholder,
        name,
        value,
        setValue,
        type,
        validator,
        editable,
        bottomHintText,
        min,
        max,
      }) {
        const [error, setError] = useState();
      
        const onChange = (e) => {
          setValue(e.target.value);
          if (error) validateInput(e);
        };
      
        const validate = () => {
          console.log("its beautiful");
        };
      
        const validateInput = (e) => setError(validator?.(e.target.value));
      
        return (
          <div className="BaseInput">
            <FormGroup className="mb-4">
              <Label className="mb-2">{label}</Label>
              <Input
                placeholder={placeholder}
                type={type || "text"}
                name={name}
                value={value}
                onChange={onChange}
                onBlur={validateInput}
                disabled={editable}
                className={editable ? "form-control-plaintext" : ""}
                readOnly={editable}
                min={min}
                max={max}
              />
              <FormText color="danger">{error}</FormText>
              <FormText color="muted">{bottomHintText}</FormText>
            </FormGroup>
          </div>
        );
      }
      
      export default BaseTextInput;
      

      Javascript language logoReact Text Input Component For Every Purpose

      react
      base
      component
      All In One

      BaseTextInput can be used as the text field for each and every use.

      label: To show what the field is for placeholder: The text to display in the input when it's empty. name: The name of the input. value: The text to input. setValue: Called when the user changes the value of the input. type: One of "text", "number", "date", or "email". validator: The function that checks the input value. editable: Whether the input is editable. bottomHintText: The hint text that appears at the bottom of the input. min: The minimumallowed value for the input. max: The maximumallowed value for the input.

      Shortcut: baseText

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.