{"id":16125719,"url":"https://github.com/dy/element-props","last_synced_at":"2025-08-24T12:41:32.042Z","repository":{"id":43941335,"uuid":"266593791","full_name":"dy/element-props","owner":"dy","description":"Normalized access to element attributes/properties","archived":false,"fork":false,"pushed_at":"2023-07-18T22:16:15.000Z","size":507,"stargazers_count":8,"open_issues_count":4,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-29T00:12:21.623Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-24T17:45:20.000Z","updated_at":"2023-09-03T00:58:39.000Z","dependencies_parsed_at":"2024-10-20T08:00:22.466Z","dependency_job_id":"3a0fd983-da57-4d2d-89bb-13c8906c4068","html_url":"https://github.com/dy/element-props","commit_stats":null,"previous_names":["spectjs/element-props"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Felement-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Felement-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Felement-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Felement-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dy","download_url":"https://codeload.github.com/dy/element-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232786436,"owners_count":18576419,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-09T21:31:01.522Z","updated_at":"2025-01-06T21:30:24.993Z","avatar_url":"https://github.com/dy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# element-props \u003c!--[![status](https://travis-ci.org/spectjs/element-props.svg)](https://travis-ci.org/spectjs/element-props)--\u003e [![test](https://github.com/spectjs/element-props/actions/workflows/test.yml/badge.svg)](https://github.com/spectjs/element-props/actions/workflows/test.yml) [![size](https://img.shields.io/bundlephobia/minzip/element-props?label=size)](https://bundlephobia.com/result?p=element-props)\n\nNormalize access to element attributes/properties.\n\n[![npm i element-props](https://nodei.co/npm/element-props.png?mini=true)](https://nodei.co/npm/element-props/)\n\n```js\nimport elementProps from 'element-props.js'\n\nlet el = document.getElementById('my-element')\nprops = elementProps(el, { z: Number })\n\n// numeric\nprops.x = 1\nel.getAttribute('x') // '1'\nprops.x // 1\n\n// boolean\nel.setAttribute('disabled', '')\nprops.disabled // true\nprops.disabled = false\nel.getAttribute('disabled') // 'false'\nprops.disabled = null\nel.getAttribute('disabled') // null\n\n// functions\nprops.onclick = e =\u003e ()\n\n// spread\n{...props} // { y: false, x: 1, id: 'my-element' }\n```\n\n## API\n\n### props = elementProps(element, types?, onchange?)\n\nCreate `props` for an `element`, with optional `types = { propName: Type }` (compat. with [attr-types](https://github.com/qwtel/attr-types)).\u003cbr/\u003e\n_Type_ is any data class like _Number_, _Boolean_, _String_, _Array_, _Object_, _Data_, _RegExp_, or `string =\u003e data` function like _JSON.parse_ (used for _Array_ and _Object_).\n\n```js\nimport elementProps from 'element-props';\n\nlet props = elementProps(el, {n:Number, b:Boolean, o:Object, a:Array, s:String, d:Date}, (key, val) =\u003e {})\nprops.n = '1'\nel.setAttribute('b', '')\nel.s = 'abc'\nel.setAttribute('a', '1,2,3')\nel.setAttribute('o', '{foo:\"bar\"}')\n\n{...props} // {n: 1, b: true, s: 'abc', o: {foo:'bar'}, a: [1,2,3]}\n```\n\n`props` handle input elements - _text_, _checkbox_, _select_:\n\n```js\nlet el = document.querySelector('#checkbox')\nlet props = elementProps(el)\nprops.value = true\n\nel.value // 'on'\nel.checked // true\nprops.value // true\nel.getAttribute('value') // 'on'\nel.getAttribute('checked') // ''\n```\n\n### prop(el, key, value)\n\nSet `key` prop/attribute value depending on value type.\n\n* `on*` property can only be a function.\n* `onEvt` === `onevt`.\n* `style` can only be an object or a string.\n* `class` can be a string, object or a string.\n* `id` can only be a string.\n* Empty strings are considered booleans: `\u003ca disabled /\u003e` → `a.props.disabled === true`\n\nCamelCase key name is mapped to dash-case for attribute.\n\n### [get, set] = input(el)\n\nCreate getter/setter for an input depending on element type.\n\n### value = parse(string, Type?)\n\nConvert string value into defined type _or_ detect type automatically (tiny _auto-parse_).\n\n```js\nimport { parse } from './element-props.js'\n\nparse('true', Boolean) // true\nparse('123') // 123\nparse('1,2,3', Array) // [1, 2, 3]\nparse('{ a: 1, b: 2 }', Object) // { a: 1, b: 2}\n```\n\n\n### polyfill\n\nAdd `props` to all HTML elements by including augment for `Element.prototype.props`:\n\n```js\nimport 'element-props/augment.js'\n\ndocument.body.id = 'my-body'\ndocument.body.props // { id: 'my-body' }\n```\n\n### Design\n\nInternally uses _Proxy_, (no IE11 support, but in theory possible with  _MutationObserver_ fallback)\n\nInspired by this [tweet](https://twitter.com/WebReflection/status/1260948278977409026?s=20) with spreading [hint](https://github.com/tc39/proposal-object-rest-spread/issues/69#issuecomment-633232470).\n\n## See also\n\n* [Element properties proposal](https://github.com/developit/unified-element-properties-proposal)\n* [templize](https://github.com/spectjs/templize)\n* [attr-types](https://github.com/qwtel/attr-types)\n\n## License\n\nISC © Dmitry Iv.\n\n\u003cp align=\"center\"\u003eॐ\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Felement-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdy%2Felement-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Felement-props/lists"}