Getting Started

25 Nov 20161 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.