https://github.com/piotr-pajak/react-html-tags
Type-safe React components for HTML tags with full TypeScript support and ref forwarding
https://github.com/piotr-pajak/react-html-tags
bun component-library components html html-tags html5 jsx jsx-components react react-components react-hooks react-typescript react19 type-safe typescript typescript-library
Last synced: 7 months ago
JSON representation
Type-safe React components for HTML tags with full TypeScript support and ref forwarding
- Host: GitHub
- URL: https://github.com/piotr-pajak/react-html-tags
- Owner: piotr-pajak
- Created: 2025-11-09T20:08:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-11-09T21:44:54.000Z (7 months ago)
- Last Synced: 2025-11-09T22:22:02.420Z (7 months ago)
- Topics: bun, component-library, components, html, html-tags, html5, jsx, jsx-components, react, react-components, react-hooks, react-typescript, react19, type-safe, typescript, typescript-library
- Language: TypeScript
- Homepage:
- Size: 51.8 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# @olympo/react-html-tags
Type-safe React components for all HTML tags with full native attribute support.
## Overview
`@olympo/react-html-tags` provides React components that wrap standard HTML elements with complete TypeScript support. Each component accepts all native HTML attributes for its corresponding tag and supports ref forwarding to the underlying DOM element.
## Features
- **Full TypeScript Support**: All components are fully typed using `JSX.IntrinsicElements`
- **Ref Forwarding**: Access underlying DOM elements via refs
- **Native Attributes**: All standard HTML attributes are supported
- **Zero Dependencies**: Only requires React 19+ as a peer dependency
- **Tree-shakeable**: Import only what you need
- **Lightweight**: Minimal wrapper around native HTML elements
## Installation
```bash
npm install @olympo/react-html-tags
# or
yarn add @olympo/react-html-tags
# or
pnpm add @olympo/react-html-tags
# or
bun add @olympo/react-html-tags
```
## Usage
```tsx
import { Div, Button, Input, Span } from '@olympo/react-html-tags';
function MyComponent() {
const inputRef = React.useRef(null);
const [value, setValue] = React.useState('');
return (
Welcome!
setValue(e.target.value)}
placeholder="Enter text..."
className="input-field"
/>
inputRef.current?.focus()}
disabled={!value}
>
Submit
);
}
```
## Available Components
**All 110+ HTML5 elements are now supported!** 🎉
### Document Structure & Semantic Elements
``, ``, `
`, ``, ``, ``, ``, ``, ``, ``
### Headings
`
`, ``, ``, ``, ``, ``
### Text Content & Formatting
``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, `
`, ``, ``, ``, ``, ``, ``, ``, ``, `
### Lists
`
`, ``, `- `, `
- `, ``, `
`, ``
### Links & Navigation
``, ``, ``, ``
### Forms & Input
``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``
### Tables
``, ``, ``, ``, ``, ``, ``, ``, ``, ``
### Media & Graphics
``, ``, `![]()
`, ``, ``, ``, ``, ``
### Embedded Content
``, ``, ``, ``, ``
### Interactive Elements
``, ``, ``
### Ruby Annotations
``, ``, ``
### Figures
``, ``
### Breaks & Separators
`
`, `
`, ``
### Web Components & Special
``, ``, ``
All components support:
- ✅ Full TypeScript typing via `JSX.IntrinsicElements`
- ✅ Ref forwarding to underlying DOM elements
- ✅ All native HTML attributes
- ✅ Event handlers with proper typing
- ✅ Comprehensive JSDoc documentation
## TypeScript Benefits
All components provide full IntelliSense and type checking:
```tsx
import { Input, Div } from '@olympo/react-html-tags';
// ✅ All native attributes are supported and type-checked
// ✅ Ref forwarding is properly typed
const divRef = React.useRef(null);
// ❌ TypeScript error: invalid attribute
```
## Examples
For more examples, see the [docs/example.tsx](./docs/example.tsx) file which includes:
- Login form with input validation
- Interactive card component
- Counter button with ref manipulation
## Development
This library uses Bun for development:
```bash
# Install dependencies
bun install
# Run type checking
bun run typecheck
# Build the library
bun run build
```
## Contributing
Contributions are welcome! We'd love your help making this library better.
Please read our [Contributing Guide](./CONTRIBUTING.md) to learn about:
- How to set up your development environment
- Our code standards and component patterns
- The pull request process
- GitHub labels and issue tracking
- Component priority list
Quick guidelines:
1. All components follow the established pattern
2. TypeScript types are properly defined
3. JSDoc comments are included
4. Components remain lightweight wrappers
For detailed instructions, see [CONTRIBUTING.md](./CONTRIBUTING.md).
## License
MIT