Codiga Code Snippet: React Text Input Component For Every Purpose

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;

React Text Input Component For Every Purpose

codeswithroh

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