Getting Started

25 Nov 2016 / 1 minute to read

This section helps to get started of the MaskEdit component in a React application

Create a MaskEdit

Refer the common React Getting Started Documentation to create an application and add necessary scripts and styles for rendering our ReactJS components.

Create a JSX file and use <EJ.MaskEdit> syntax to render React MaskEdit component. Add required properties to <EJ.MaskEdit> tag element.

  • html
  • ReactDOM.render(   
            <EJ.MaskEdit>
            </EJ.MaskEdit>,
            document.getElementById('mask')  
        );

    Define an HTML element for adding MaskEdit in the application and refer the JSX file created.

  • html
  • <div id="mask"></div>
        <script type="text/babel" src="sample.jsx">

    This will render an empty MaskEdit component on executing.

    Configure Properties

    In the JSX, need to declare the MaskEdit properties. Refer to the following code,.

  • html
  • ReactDOM.render(   
    	<EJ.MaskEdit value="4242422424" maskFormat="99 999-99999">
    	</EJ.MaskEdit>,
            document.getElementById('mask')
        );

    Run the above code to render the following output,

    Note: You can find the MaskEdit properties from the API reference document.