Notoriously Problematic Merge

    react-fmt-input
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.0 • Public • Published

    This is a test task from a job interview, which was allocated 30 minutes of live coding. Maybe this example will be useful for someone to start a more advanced component or you can use it as is.

    demo

    Component API

    interface FormattedInputProps {
      label: string;
      value: string;
      mask: string;
      placeholder: string;
      errorMessage: string;
      parser?: (str: string | null | undefined) => string;
      formatter?: (str: string, mask: string) => string;
      onChange: (str: string) => void;
    }

    Mask format

    ^ - upercase character
    _ - lowercase character
    # - number
    

    Example:

    import {useState} from 'react';
    import {defaultParser, defaultFormatter, FormattedInput} from 'react-fmt-input';
    
    
    const Demo = () => {
      const [phone, setPhone] = useState<string>("");
    
      return (
        <FormattedInput
          label="Phone"
          value={phone}
          mask="+# (###) ###-##-##"
          placeholder="+7 (999) 123-45-67"
          errorMessage="Invalid number"
          onChange={setPhone}
          parser={defaultParser} // optional
          formatter={defaultFormatter} // optional
        />
      )
    };

    Demo project

    https://github.com/kobzarvs/formatted-input-demo

    Vercel demo

    https://react-formatted-input.vercel.app/

    Install

    npm i react-fmt-input

    DownloadsWeekly Downloads

    2

    Version

    1.5.0

    License

    MIT

    Unpacked Size

    218 kB

    Total Files

    10

    Last publish

    Collaborators

    • kobzarvs