{"type_of":"article","id":123456,"title":"Use Custom HTML Attribute's in TypeScript","description":"Photo by Ningyu He on Unsplash   Installing different packages and frameworks means you run into som...","readable_publish_date":"Jun 13 '19","slug":"use-custom-html-attribute-s-in-typescript-2co","path":"/lukethacoder/use-custom-html-attribute-s-in-typescript-2co","url":"https://dev.to/lukethacoder/use-custom-html-attribute-s-in-typescript-2co","comments_count":2,"public_reactions_count":14,"collection_id":null,"published_timestamp":"2019-06-13T14:31:50Z","language":null,"subforem_id":null,"positive_reactions_count":14,"cover_image":"https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fsh6a2abgn08holyw0ik5.jpg","social_image":"https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fsh6a2abgn08holyw0ik5.jpg","canonical_url":"https://dev.to/lukethacoder/use-custom-html-attribute-s-in-typescript-2co","created_at":"2019-06-13T14:31:50Z","edited_at":null,"crossposted_at":null,"published_at":"2019-06-13T14:31:50Z","last_comment_at":"2023-05-09T14:59:53Z","reading_time_minutes":1,"tag_list":"typescript, react, todayisearched, showdev","tags":["typescript","react","todayisearched","showdev"],"body_html":"\u003cblockquote\u003e\n\u003cp\u003ePhoto by \u003ca href=\"https://unsplash.com/@hnyuuu\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eNingyu He\u003c/a\u003e on Unsplash\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cp\u003eInstalling different packages and frameworks means you run into some interesting problems with TypeScript. One recently was using custom HTML Attributes on DOM elements.\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight js-code-highlight\"\u003e\n\u003cpre class=\"highlight typescript\"\u003e\u003ccode\u003e\u003cspan class=\"kr\"\u003edeclare\u003c/span\u003e \u003cspan class=\"kr\"\u003emodule\u003c/span\u003e \u003cspan class=\"dl\"\u003e'\u003c/span\u003e\u003cspan class=\"s1\"\u003ereact\u003c/span\u003e\u003cspan class=\"dl\"\u003e'\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"kr\"\u003einterface\u003c/span\u003e \u003cspan class=\"nx\"\u003eHTMLAttributes\u003c/span\u003e\u003cspan class=\"o\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nx\"\u003eT\u003c/span\u003e\u003cspan class=\"o\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"kd\"\u003eextends\u003c/span\u003e \u003cspan class=\"nx\"\u003eAriaAttributes\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eDOMAttributes\u003c/span\u003e\u003cspan class=\"o\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"nx\"\u003eT\u003c/span\u003e\u003cspan class=\"o\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n    \u003cspan class=\"c1\"\u003e// extends React's HTMLAttributes\u003c/span\u003e\n    \u003cspan class=\"nx\"\u003ecustom\u003c/span\u003e\u003cspan class=\"p\"\u003e?:\u003c/span\u003e \u003cspan class=\"kr\"\u003estring\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n  \u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cdiv class=\"highlight__panel js-actions-panel\"\u003e\n\u003cdiv class=\"highlight__panel-action js-fullscreen-code-action\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"\u003e\u003ctitle\u003eEnter fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"\u003e\u003ctitle\u003eExit fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n\n\n\u003cp\u003eThis piece of code solved my issue, and allows you to add any custom HTML attributes when using TypeScript.\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight js-code-highlight\"\u003e\n\u003cpre class=\"highlight html\"\u003e\u003ccode\u003e\u003cspan class=\"nt\"\u003e\u0026lt;div\u003c/span\u003e \u003cspan class=\"na\"\u003ecustom=\u003c/span\u003e\u003cspan class=\"s\"\u003e\"no_ts_errors\"\u003c/span\u003e\u003cspan class=\"nt\"\u003e\u0026gt;\u003c/span\u003e\n  your content here\n\u003cspan class=\"nt\"\u003e\u0026lt;/div\u0026gt;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cdiv class=\"highlight__panel js-actions-panel\"\u003e\n\u003cdiv class=\"highlight__panel-action js-fullscreen-code-action\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"\u003e\u003ctitle\u003eEnter fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"\u003e\u003ctitle\u003eExit fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n\n\n","body_markdown":"\u003e Photo by \u003ca href=\"https://unsplash.com/@hnyuuu\"\u003eNingyu He\u003c/a\u003e on Unsplash\n\nInstalling different packages and frameworks means you run into some interesting problems with TypeScript. One recently was using custom HTML Attributes on DOM elements.\n\n```typescript\ndeclare module 'react' {\n  interface HTMLAttributes\u003cT\u003e extends AriaAttributes, DOMAttributes\u003cT\u003e {\n    // extends React's HTMLAttributes\n    custom?: string;\n  }\n}\n```\nThis piece of code solved my issue, and allows you to add any custom HTML attributes when using TypeScript.\n\n```html\n\u003cdiv custom=\"no_ts_errors\"\u003e\n  your content here\n\u003c/div\u003e\n```","user":{"name":"Luke Secomb","username":"lukethacoder","twitter_username":"lu_ke____","github_username":"lukethacoder","user_id":164500,"website_url":"https://lukesecomb.digital","profile_image":"https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F164500%2Faecd8212-9e6d-44d2-86cc-6ab0b1edd2e8.jpg","profile_image_90":"https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F164500%2Faecd8212-9e6d-44d2-86cc-6ab0b1edd2e8.jpg"},"flare_tag":{"name":"showdev","bg_color_hex":"#091b47","text_color_hex":"#b2ffe1"}}