How to create a custom component or control in React Typescript

 In this tutorial we are going to see how to create a custom control or component in React Typescript.

1. Props and Ref as Input
2. Html Template 
3. Css

Why we need Props and Ref as Input, Props means input parameters that needs for component. Ref is used for Referring your component using Ref when it is accessed or used in the Html.

From the above you can see when RButton component is used we referred it as using UseRef. 

useImperativeHandle  used to expose the methods and properties to access a the parent component when it is referred at the time of usage, in this example we are exposing Id and click event for the ref. Now we can see the full implementation of RButton Component.

Full Component Implementation

Component CSS:

Now we can use it like Below

Output:

From this tutorial you can learn how to write the custom component in React Typescript