How To Extend An HTML Element In A Component’s Props In React

With button element, you can extend an HTML element in a component’s props in React. So how to do it? Let’s go into detail now.

Extend an HTML element in a component’s props in React

With button element

The logic here is we will create a new element component that has already extended with the specific property by using the interface.

Example:

import React from "react";

function App() {
    interface buttonAttribute
        extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    
        // Extend properties
        content: string,
        id: number,
        className: string,

    }

    // Using spread syntax to get all properties inside the object type
    const ExtendButton: React.FunctionComponent<buttonAttribute> = ({
        content,
        ...rest
    
    }) => {
        return <button {...rest}>{content}</button>;
    };

    return (
        <div className="App">
            <ExtendButton
                className="btnMain"
                id={1}
                content={"click me"}
            ></ExtendButton>
        </div>
    );

}

export default App;

Output:

And my button also has all property that I pass in:

As you see, I create a new interface buttonAttribute that extends the button property by adding some new custom properties. Then I set that type property of a new component called ExtendButton. The name is up to you, but it must be capitalized because it is a component. 

I also use the spread operator to get all properties inside the object.

With input element

If you want to extend more element type example input element you can use ‘HTMLAttributes’ and buttonAttribute type.

Example:

import React from "react";

function App() {
    interface inputAttribute extends React.HTMLAttributes<HTMLInputElement> {
        // Extend properties
        id: number,
        className: string,
    }
    // Using spread syntax to get all properties inside object type
    const ExtendInput: React.FunctionComponent<inputAttribute> = ({
        ...rest
    
    }) => {
        return <input {...rest}>{}</input>;
    };

    return (
        <div className="App">
            <ExtendInput
                className="Main"
                id={1}
                placeholder="Write here"
                type={"text"}
            ></ExtendInput>
        </div>
    );

}

export default App;

Output:

Or, if you have various element types, you can use the ‘HTMLAttributes’ type, and inside the generic, you can define the type suitable for your HTML element.

Have a tip here you can write HTML, then Typescript will give you recommended type. You just need to find one that is suitable for you.

You can add as many custom props as you like inside the interface that you create. It will all become the property of the element you create and pass into the parent component.

Summary

In this article, I showed you how to extend an HTML Element in a Component’s props in React. You can create a new interface with all custom attributes and then set it to a new HTML element. Hope it’s useful to you. Thank you for reading!

Maybe you are interested:

• Import Components from another file in React
• Passing data from child to parent component in reactjs
• Conditionally add attributes to React components

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm