react-html-props

⚛️ React HTML Props

Convenient TypeScript types for all React HTML props.

   

 

Documentation

Read the official documentation.

Overview

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.

Donate

If this project helped you, please consider buying me a coffee or sponsoring me. Your support is much appreciated!

 

Table of Contents

• Documentation
• Overview
  • Features include:
• Donate
• Table of Contents
• Installation
• Quick Start
• Unpacking Props
• Extending HTML Props
• Included HTML Element Props
• Props Without Ref
• TypeScript
• Icon Attribution
• Contributing
• ⭐ Found It Helpful? Star It!
• License

Installation

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 = () => (
  <MyComponent
    className="text-center"
    style={{ background: 'blue', color: 'white' }}
    onClick={() => console.log('Get schwifty!')}
  >
    Show me what you got
  </MyComponent>
);

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>
    </div>
  );
};

(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.

TypeScript

Type definitions have been included for TypeScript support.

Icon Attribution

Favicon by Twemoji.

Contributing

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: 👉⭐

License

See LICENSE.md.