IMask not formatting the value as per given format

Question

I am trying to format the text/value as per the pattern given in "mask". In below example I have created FormattedInput and calling in from app.js as <FormattedInput mask="000-00-0000" initialValue="0987654321" /> which works as expected.

However, I don't want to create any custom component (like FormattedInput) and use javascript function to format the value as per pattern given in mask. How to achieve it?

import React from 'react';
import { IMask } from 'react-imask';
const formatValue = (mask, value) => {
    const maskedValue = IMask.createMask({ mask });
    maskedValue.resolve(value);
    return maskedValue.value;
};

const FormattedInput = ({ mask, initialValue }) => {
 const formattedValue = formatValue(mask, "123456789");
 
 return(
    <div>
      <h1>Formatted Input Example</h1>
       <span>{formattedValue}</span>
    </div>);
};

export default FormattedInput;

Tried approach: I tried removing custom component and writing formatValue function in app.js itself. It did not convert the value in given format

import React from 'react';
import { IMask } from 'react-imask';

const formatValue = (mask, value) => {
    const maskedValue = IMask.createMask({ mask });
    maskedValue.resolve(value);
    return maskedValue.value;
};

function App() {
    const formattedValue = formatValue(999-99-9999, "123456789");
  return (
    <div className="App">
       {formattedValue}
    </div>
  );
}

export default App;

Answer 1

Your mask on the second example should've been 000-00-0000 not 999-99-9999, as zeros are the pattern for numbers in IMask. Documentation. But since this could be a typo, here's the actual answer.

If you're trying to use a pattern mask, this should also be a string "000-00-0000" and your objects syntax in IMask.createMask is also wrong because you could have more options than just mask in the object, so:

import React from 'react';
import { IMask } from 'react-imask';

const formatValue = (mask, value) => {
    const maskedValue = IMask.createMask({ mask: mask });
    maskedValue.resolve(value);
    return maskedValue.value;
};

function App() {
    const formattedValue = formatValue("000-00-0000", "123456789");
  return (
    <div className="App">
       {formattedValue}
    </div>
  );
}

export default App;

Or you could also pass the object in the function call directly like this:

import React from 'react';
import { IMask } from 'react-imask';

const formatValue = (mask, value) => {
    const maskedValue = IMask.createMask(mask);
    maskedValue.resolve(value);
    return maskedValue.value;
};

function App() {
    const formattedValue = formatValue({mask: "000-00-0000"}, "123456789");
  return (
    <div className="App">
       {formattedValue}
    </div>
  );
}

export default App;