Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justinmahar/react-html-props
⚛️ Convenient TypeScript types for all React HTML props.
https://github.com/justinmahar/react-html-props
html props react typescript
Last synced: 19 days ago
JSON representation
⚛️ Convenient TypeScript types for all React HTML props.
- Host: GitHub
- URL: https://github.com/justinmahar/react-html-props
- Owner: justinmahar
- License: mit
- Created: 2021-05-19T15:46:54.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-02-10T18:19:41.000Z (9 months ago)
- Last Synced: 2024-10-11T00:57:29.745Z (about 1 month ago)
- Topics: html, props, react, typescript
- Language: TypeScript
- Homepage: https://justinmahar.github.io/react-html-props/
- Size: 7.84 MB
- Stars: 60
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
⚛️ React HTML Props
Convenient TypeScript types for all React HTML props.
## Documentation
Read the **[official documentation](https://justinmahar.github.io/react-html-props/)**.
## Overview
This package includes convenient [TypeScript](https://www.typescriptlang.org/) type definitions for all React HTML props.
For example, this allows you to use the type `DivProps` instead of:
```tsx
React.DetailedHTMLProps, 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](#documentation)
- [Overview](#overview)
- [Features include:](#features-include)
- [Donate](#donate)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Quick Start](#quick-start)
- [Unpacking Props](#unpacking-props)
- [Extending HTML Props](#extending-html-props)
- [Included HTML Element Props](#included-html-element-props)
- [Props Without Ref](#props-without-ref)
- [TypeScript](#typescript)
- [Icon Attribution](#icon-attribution)
- [Contributing](#contributing)
- [⭐ Found It Helpful? Star It!](#-found-it-helpful-star-it)
- [License](#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.
```tsx
import { DivProps } from "react-html-props";
const MyComponent = (props: DivProps) => {
return
{props.children};
};
```
> Note: `DivProps` is equivalent to `React.DetailedHTMLProps, HTMLDivElement>`
In this example, we're using `className`, `style`, and `onClick` on our own component since it supports all `div` props:
```tsx
const render = () => (
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) and the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to unpack props, such as `children`, from the rest of an element's props.
Using `div` as an example again:
```tsx
import { DivProps } from "react-html-props";
export const MyComponent = ({ children, ...divProps }: DivProps): JSX.Element => {
return
{children};
};
```
## Extending HTML Props
You can extend all HTML props to add your own.
Then use [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) to unpack and use your own props.
Just follow the example below:
```tsx
interface KindleOfKittensProps extends DivProps {
kittenCount: 10;
}
export const KindleOfKittens = ({ kittenCount, ...divProps }: KindleOfKittensProps): JSX.Element => {
return (
I have a kindle of {kittenCount} kittens
);
};
```
(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`.
> A `ref` may not always be desirable, so it remains optional to give you flexibility. For instance, components returned by [`styled-components`](https://styled-components.com/) may not support React's `ref` type.
## TypeScript
Type definitions have been included for [TypeScript](https://www.typescriptlang.org/) support.
## Icon Attribution
Favicon by [Twemoji](https://github.com/twitter/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!](https://github.com/justinmahar/react-html-props/stargazers)
If you found this project helpful, let the community know by giving it a [star](https://github.com/justinmahar/react-html-props/stargazers): [👉⭐](https://github.com/justinmahar/react-html-props/stargazers)
## License
See [LICENSE.md](https://justinmahar.github.io/react-html-props/?path=/docs/license--docs).