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;