React Masked Input

A lightweight Input masking for React input components.

react-masked-input requires React 16.8.0 or later.

Installation

npm install @mahiraltinkaya/react-masked-input

Demos

Usage

| Character | Allowed input | | :-------: | :-----------: | | # | [0-9] | | a | [A-Za-z] | | * | [A-Za-z0-9] |

Separators

You can use lots of type separators. But you can't use #, a, * for separating. Also you can use static values. Also you can use as react hook. Only import {useInputMask} and use like below examples.

| Examples | Responses | | :---------------: | :---------------: | | ###-aaa/*** | 123-ABC/1EF | | ##:## a.m. | 12:12 a.m. | | +90 ### ### ## ## | +90 555 555 55 55 | | (##3):(#12) | (123):(112) |

import React from "react";
import MaskedInput, { useInputMask } from "./react-masked-input";
import "./App.css";
import { TextField } from "@mui/material";
import { useForm } from "react-hook-form";

function App() {
  const maskedText = useInputMask();
  const [value, setValue] = React.useState("");
  const [timeFormat, setTimeFormat] = React.useState("");
  const [date, setDate] = React.useState("");
  const [iban, setIban] = React.useState("");

  console.log(maskedText("+90 (###) ### ####", "5555555555")); // +90 (555) 555 55 55

  return (
    <>
      <div
        style={{
          width: 250,
          padding: "5em",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <MaskedInput
          mask="+90 (###) ### ## ##"
          value={value}
          placeholder={"+90 (555) 555 55 55"}
          size={"x-large"}
          color={"warning"}
          onChange={setValue}
        >
          <TextField></TextField>
        </MaskedInput>

        <MaskedInput
          mask="##:##"
          value={timeFormat}
          placeholder={"12:12"}
          onChange={setTimeFormat}
        ></MaskedInput>

        <MaskedInput
          mask="##/##/####"
          value={date}
          placeholder={"12/12/2023"}
          onChange={setDate}
        ></MaskedInput>

        <MaskedInput
          mask="TR## #### #### #### #### #### ##"
          value={iban}
          placeholder={"TR16 9090 9090 9090 9090 9090 90"}
          onChange={setIban}
        ></MaskedInput>
      </div>
    </>
  );
}

export default App;