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.