TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

⚛️ React HTML Props

Convenient TypeScript types for all React HTML props.

npm Version  View project on GitHub  Deploy Status  Sponsor


Read the official documentation.


This package includes convenient TypeScript type definitions for all React HTML props.

For example, this allows you to use the type DivProps instead of:

React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

...Because nobody wants to type all of that. 😁

Using these types makes it easy to support all standard HTML props, such as style and className, in your own components.

Features include:

  • 🧩 TypeScript types for all React HTML props
    • Easily use types for HTML props with simple names like DivProps.
  • 🧠 Easy to remember
    • All types start with the HTML element name, so you'll never end up scratching your head.
  • 👍 Optional types without React ref
    • Where needed, use WithoutRef types for props that don't inherit ref from React.DetailedHTMLProps.


I hope this project makes your life a little easier! If it does and you'd like to show your appreciation, consider supporting the project with a coffee or sponsorship.

Your support helps keep the project going and will earn you some serious virtual high fives. Maybe even a virtual fist bump if you're feeling extra cool.

Sponsor via GitHub Buy me a coffee Buy me 3 coffees Buy me 5 coffees

Table of Contents


npm i --save-dev react-html-props

Quick Start

Let's use div as an example since it's the most common.

You can use DivProps to support all props for div in your own components.

import { DivProps } from "react-html-props";

const MyComponent = (props: DivProps) => {
  return <div {...props}>{props.children}</div>;

Note: DivProps is equivalent to React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

In this example, we're using className, style, and onClick on our own component since it supports all div props:

const render = () => (
    style={{ background: 'blue', color: 'white' }}
    onClick={() => console.log('Get schwifty!')}
    Show me what you got

Types are available for all HTML props. See below for a table containing all supported types.

Unpacking Props

We can use object destructuring and the spread operator to unpack props, such as children, from the rest of an element's props.

Using div as an example again:

import { DivProps } from "react-html-props";

export const MyComponent = ({ children, ...divProps }: DivProps): JSX.Element => {
  return <div {...divProps}>{children}</div>;

Extending HTML Props

You can extend all HTML props to add your own.

Then use object destructuring to unpack and use your own props.

Just follow the example below:

interface KindleOfKittensProps extends DivProps {
  kittenCount: 10;

export const KindleOfKittens = ({ kittenCount, ...divProps }: KindleOfKittensProps): JSX.Element => {
  return (
    <div {...divProps}>
      <h1>I have a kindle of {kittenCount} kittens</h1>

(Yes, a group of kittens is called a "kindle")

Included HTML Element Props

The goal was to make it as easy to use each HTML element's props as possible, so the types for all props begin with the exact HTML element.

For example, the type for the p element's props is PProps.

In some cases there are multiple types available, such as with headings h1, h2, h3, etc. The props for these elements can be referenced either as H1Props, H2Props, H3Props, etc, or simply as HeadingProps. See the table below for more.

You can import any of the following types:

HTML Element Props Type To Use
a AProps
abbr AbbrProps
address AddressProps
area AreaProps
article ArticleProps
aside AsideProps
audio AudioProps
b BProps
base BaseProps
bdi BDIProps
bdo BDOProps
blockquote BlockQuoteProps
body BodyProps
br BRProps
button ButtonProps
canvas CanvasProps
caption CaptionProps
cite CiteProps
code CodeProps
col ColProps
colgroup ColGroupProps
data DataProps
datalist DataListProps
dd DDProps
del DelProps
details DetailsProps
dfn DfnProps
dialog DialogProps
div DivProps
dl DLProps
dt DTProps
em EmProps
embed EmbedProps
fieldset FieldSetProps
figcaption FigCaptionProps
figure FigureProps
footer FooterProps
form FormProps
h1 H1Props, HeadingProps
h2 H2Props, HeadingProps
h3 H3Props, HeadingProps
h4 H4Props, HeadingProps
h5 H5Props, HeadingProps
h6 H6Props, HeadingProps
head HeadProps
header HeaderProps
hgroup HGroupProps
hr HRProps
html HtmlProps
i IProps
iframe IFrameProps
img ImgProps
input InputProps
ins InsProps
kbd KbdProps
label LabelProps
legend LegendProps
li LIProps
link LinkProps
main MainProps
map MapProps
mark MarkProps
menu MenuProps
meta MetaProps
meter MeterProps
nav NavProps
noscript NoScriptProps
object ObjectProps
ol OLProps
optgroup OptGroupProps
option OptionProps
output OutputProps
p PProps
param ParamProps
picture PictureProps
pre PreProps
progress ProgressProps
q QProps
rp RPProps
rt RTProps
ruby RubyProps
s SProps
samp SampProps
script ScriptProps
section SectionProps
select SelectProps
slot SlotProps
small SmallProps
source SourceProps
span SpanProps
strong StrongProps
style StyleProps
sub SubProps
summary SummaryProps
sup SupProps
svg SVGProps
table TableProps
tbody TBodyProps, TableSectionProps
td TDProps
template TemplateProps
textarea TextAreaProps
tfoot TFootProps, TableSectionProps
th THProps
thead THeadProps, TableSectionProps
time TimeProps
title TitleProps
tr TRProps
track TrackProps
u UProps
ul ULProps
var VarProps
video VideoProps
wbr WBRProps
webview WebViewProps
Generic HTML Element ElementProps

For any elements not listed above, use the generic ElementProps.

Props Without Ref

You may need props that exclude the ref field inherited from React.DetailedHTMLProps.

For this, all types have a WithoutRef option.

For example, you can use DivPropsWithoutRef for a div without a React ref. DivPropsWithoutRef is equivalent to React.HTMLAttributes<HTMLDivElement>.

A ref may not always be desirable, so it remains optional to give you flexibility. For instance, components returned by styled-components may not support React's ref type.


Type definitions have been included for TypeScript support.

Icon Attribution

Favicon by Twemoji.


Open source software is awesome and so are you. 😎

Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.

For major changes, open an issue first to discuss what you'd like to change.

Found It Helpful? Star It!

If you found this project helpful, let the community know by giving it a star: 👉



Package Sidebar


npm i react-html-props

Weekly Downloads






Unpacked Size

118 kB

Total Files


Last publish


  • justinmahar