onChangeInput

The onChangeInput prop acts as a callback function, invoked each time a user interacts with the internal input field. This prop is essential for providing immediate feedback and processing input values dynamically as the user types.

The function assigned to this prop activates whenever there is any modification in the input field's value and receives the current input value as its parameter, enabling the tracking of real-time input and facilitating the application of any necessary logic or actions based on that input.

About onChangeInput

• Property: onChangeInput
• Type: (value: string) => void;
• Default: undefined

Demo

react-multi-email

Input your Email Address

react-multi-email value

empty

info

Dynamic styling example: This demo changes the style of the input field based on the input value. If an incorrect input is detected, the border color changes to red.

Code

Full code

OnChangeInput.tsx

import * as React from 'react';
import { ReactMultiEmail } from 'react-multi-email';
import 'react-multi-email/dist/style.css';

export default function multiEmail() {
  const [emails, setEmails] = React.useState<string[]>([]);
  const [inputStyle, setInputStyle] = React.useState<React.CSSProperties>({});

  const handleInputChange = (value: string) => {
    // simple validation example
    const isValidEmail = /\S+@\S+\.\S+/.test(value);
    if (!isValidEmail && value) {
      setInputStyle({ borderColor: 'red' });
    } else {
      setInputStyle({});
    }
  };

  return (
    <div style={styles}>
      <h3>react-multi-email</h3>
      <ReactMultiEmail
        // onChangeInput prop
        onChangeInput={handleInputChange}
        style={inputStyle}
        placeholder="Input your Email Address"
        emails={emails}
        onChange={(_emails: string[]) => {
          setEmails(_emails);
        }}
        getLabel={(
          email: string,
          index: number,
          removeEmail: (index: number) => void
        ) => {
          return (
            <div data-tag key={index}>
              {email}
              <span data-tag-handle onClick={() => removeEmail(index)}>
                ×
              </span>
            </div>
          );
        }}
      />
      <h4>react-multi-email value</h4>
      <p>{emails.join(", ") || "empty"}</p>
    </div>
  );
}

const styles = {
  fontFamily: "sans-serif",
  width: "500px",
  border: "1px solid rgb(238, 238, 238)",
  background: "rgb(243, 243, 243)",
  padding: "25px",
  margin: "20px",
  color: "black",
};

Code snippet

OnChangeInput.tsx

const handleInputChange = (value: string) => {
  // do something
};

<ReactMultiEmail
  onChangeInput={handleInputChange}
  // other props...
/>