
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
react-html-props
Advanced tools
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.
DivProps
.WithoutRef
types for props that don't inherit ref
from React.DetailedHTMLProps
.If this project helped save you time, please consider buying me a coffee, which powers my development (and life). Your support is much appreciated!
npm i --save-dev react-html-props
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 toReact.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.
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>;
};
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")
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
.
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 bystyled-components
may not support React'sref
type.
Type definitions have been included for TypeScript support.
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.
If you found this project helpful, let the community know by giving it a star: 👉⭐
Want to support the project? Feel free to grab me a coffee, which is my main source of fuel for development:
See LICENSE.md.
FAQs
Convenient TypeScript types for all React HTML props.
The npm package react-html-props receives a total of 49,649 weekly downloads. As such, react-html-props popularity was classified as popular.
We found that react-html-props demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.