Getting Started

11 Jan 20171 minute to read

Using the following steps, you can create a React ColorPicker component. The basic rendering of React ColorPicker can be achieved with default functionality.

Create an ColorPicker

You can create a React application and add necessary scripts and styles with the help of the given React Getting Started Documentation.

Create a JSX file for rendering ColorPicker component using <EJ.ColorPicker> syntax. Add required properties to it in <EJ.ColorPicker> tag element

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

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

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

    This will render an empty ColorPicker component on executing.

    Configure Properties

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

  • html
  • ReactDOM.render(   
    	<EJ.ColorPicker value="#278787">
    	</EJ.ColorPicker>,
            document.getElementById('colorpick')
        );

    Run the above code to render the following output,

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