# attrs-in-props

> Utilize props as attributes

Latest version **3.14.693** (published 2026-08-26) · 0 weekly downloads

## Install

```sh
npm install attrs-in-props
pnpm add attrs-in-props
yarn add attrs-in-props
bun add attrs-in-props
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.14.693 |
| Published | 2026-08-26 |
| First published | 2023-02-26 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 66.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | symbo.ls |
| Maintainers | nikoloza, desire_rawr |

## Links

- npm: https://www.npmjs.com/package/attrs-in-props
- Repository: https://github.com/symbo-ls/smbls
- Homepage: https://github.com/symbo-ls/smbls#readme
- Issues: https://github.com/symbo-ls/smbls/issues
- npm.io page: https://npm.io/package/attrs-in-props

## Dependencies (1)

- [@symbo.ls/utils](https://npm.io/package/@symbo.ls/utils.md) ^3.14.599

## Recent versions

- 3.14.693 (latest) — 2026-08-26
- 3.14.692 — 2026-08-07
- 3.14.689 — 2026-08-07
- 3.14.682 — 2026-08-07
- 3.14.599 — 2026-07-28
- 3.14.595 — 2026-07-27
- 3.14.105 — 2026-05-19
- 3.14.104 — 2026-05-18
- 3.14.103 — 2026-05-18
- 3.14.102 — 2026-05-18
- 3.14.101 — 2026-05-18
- 3.14.100 — 2026-05-18
- 3.14.9 — 2026-05-18
- 3.14.8 — 2026-05-16
- 3.14.7 — 2026-05-11
- … 397 more at https://npm.io/package/attrs-in-props/versions

## README

# attrs-in-props

HTML attributes as props for DOMQL elements. Provides attribute validation, filtering, and automatic resolution for HTML elements.

## What it does

- Validates HTML attributes by tag name (knows which attributes are valid for `<img>`, `<a>`, `<input>`, etc.)
- Filters props to extract valid HTML attributes and DOM events
- Provides attribute transform plugins for common patterns (src, href resolution)
- Supports all standard HTML attributes, ARIA attributes, SVG attributes, and DOM events

## API

### `checkAttributeByTagName(tag, attribute)`

Check if an attribute is valid for a specific HTML tag.

```javascript
import { checkAttributeByTagName } from 'attrs-in-props'

checkAttributeByTagName('img', 'src')     // true
checkAttributeByTagName('img', 'href')    // false
checkAttributeByTagName('div', 'id')      // true (default attribute)
```

### `filterAttributesByTagName(tag, props, cssProps?)`

Filter component props to extract only valid HTML attributes and DOM events.

```javascript
import { filterAttributesByTagName } from 'attrs-in-props'

filterAttributesByTagName('img', {
  src: '/photo.jpg',
  alt: 'Photo',
  theme: 'primary',     // filtered out (not an HTML attr)
  padding: '10px'       // filtered out (CSS prop)
})
// -> { src: '/photo.jpg', alt: 'Photo' }
```

### `resolvePropValue(el, value)`

Resolves a prop value: executes dynamic values and replaces `{{template}}` literals.

```javascript
import { resolvePropValue } from 'attrs-in-props'

// In an attr handler:
const src = resolvePropValue(el, el.src)
```

### `ATTR_TRANSFORMS`

Auto-resolve map for common attributes. Handles `exec` + template literal replacement for: `src`, `href`, `action`, `poster`, `data`.

```javascript
import { ATTR_TRANSFORMS, applyAttrTransforms } from 'attrs-in-props'

// Apply all valid transforms for an element's tag
const attrs = applyAttrTransforms(element)
```

Components using standard `src`/`href` patterns no longer need custom `attr` blocks — `ATTR_TRANSFORMS` handles resolution automatically.

### `executeAttr(elem, element)`

Execute all handler functions in an element's `attr` block.

```javascript
import { executeAttr } from 'attrs-in-props'

const resolved = executeAttr(componentDef, element)
// -> { src: '/resolved-path.jpg', alt: 'Photo' }
```

## ARIA Attributes

All `aria-*` attributes are valid on any element. Three syntax forms are supported:

```javascript
// 1. Kebab-case (standard HTML)
{ 'aria-label': 'Close', 'aria-expanded': true }

// 2. camelCase (JS-friendly) — auto-converted to kebab-case
{ ariaLabel: 'Close', ariaExpanded: true }

// 3. Object shorthand
{ aria: { label: 'Close', expanded: true, hidden: false } }
```

All three produce `aria-label="Close"`, `aria-expanded="true"` in the DOM.

## Data Attributes

All `data-*` attributes are valid on any element, with the same three syntax forms:

```javascript
{ 'data-testid': 'btn' }         // kebab-case
{ dataTestId: 'btn' }            // camelCase → data-test-id
{ data: { testId: 'btn' } }     // object shorthand → data-test-id
```

## Conditional Attributes

Attributes inside `$`, `.`, `!` prefix blocks are conditionally applied — same prefixes as css-in-props:

```javascript
const Button = {
  // $ prefix: global case from context.cases
  '$isSafari': { disabled: true, 'aria-label': 'Safari' },

  // . prefix: truthy (element/state first, then context.cases)
  '.isActive': { aria: { expanded: true }, 'data-state': 'open' },

  // ! prefix: falsy
  '!isActive': { ariaHidden: true }
}
```

Conditional attribute values are wrapped in functions and re-evaluated on every `update()` call.

### `extractConditionalAttrs(props, tag, cssProps?)`

Extract HTML attributes from conditional blocks in props.

```javascript
import { extractConditionalAttrs } from 'attrs-in-props'

const conditionalAttrs = extractConditionalAttrs(props, 'button', cssPropsRegistry)
// Returns attr functions that evaluate conditions on each call
```

## Default attributes

All HTML elements support these attributes by default: `id`, `title`, `class`, `style`, `dir`, `lang`, `hidden`, `tabindex`, `draggable`, `contenteditable`, `spellcheck`, `translate`, `role`, `slot`, and more.

All `aria-*` and `data-*` attributes are valid on any element. Element-specific attributes are supported for 50+ HTML tags including `a`, `img`, `input`, `video`, `iframe`, `form`, `select`, `textarea`, and `svg`.

---
_Source: https://npm.io/package/attrs-in-props · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._