{"_id":"@bento/use-data-attributes","_rev":"3-b5fef130ce9193938dd5d847e8790b69","name":"@bento/use-data-attributes","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@bento/use-data-attributes","version":"0.1.0","keywords":["attributes","bento","component","data","hook","library","react"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"@bento/use-data-attributes@0.1.0","maintainers":[{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"homepage":"https://github.com/godaddy/bento#readme","bugs":{"url":"https://github.com/godaddy/bento/issues"},"dist":{"shasum":"0d86e354388ddf576fbe7f4cd4f59743d76d7615","tarball":"https://registry.npmjs.org/@bento/use-data-attributes/-/use-data-attributes-0.1.0.tgz","fileCount":10,"integrity":"sha512-sMsIEFohLNSrEfvl3dNo1wyJbj41j0bAlZb+3V0yP5cENWAUJSzLWVvF1PAzUj2clbUHf7pLa/IwcH++zEQTzg==","signatures":[{"sig":"MEUCIA7mug9ZrqbEh417GiUFRxTnaYha9yAh25d0kc6oDSlLAiEA7rV61wT7P3jFtNL10PjCzShomYuOrUYjM9jtEqcdUMg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fuse-data-attributes@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":13601},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"8cf6c3e7e24572c8b548fc4207e3af58bc3b5cc1","scripts":{"dev":"tsup-node --watch","lint":"biome lint && tsc --noEmit","test":"vitest --run","build":"tsup-node","pretest":"npm run build","posttest":"npm run lint","test:watch":"vitest"},"_npmUser":{"name":"kawikabader","email":"ekbader@gmail.com"},"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"_npmVersion":"10.9.2","description":"Introduce the received props as data-attributes on the rendered element","directories":{},"_nodeVersion":"23.11.1","dependencies":{"dashify":"^2.0.0","use-deep-compare":"^1.3.0","@bento/to-attribute-value":"^0.1.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/use-data-attributes_0.1.0_1761318932399_0.9505479315256424","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@bento/use-data-attributes","version":"0.1.1","keywords":["attributes","bento","component","data","hook","library","react"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"@bento/use-data-attributes@0.1.1","maintainers":[{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"homepage":"https://github.com/godaddy/bento#readme","bugs":{"url":"https://github.com/godaddy/bento/issues"},"dist":{"shasum":"206f91753b115c22fbf972a125e23684fa8f1279","tarball":"https://registry.npmjs.org/@bento/use-data-attributes/-/use-data-attributes-0.1.1.tgz","fileCount":11,"integrity":"sha512-5aXX3n/OpiIN2aFSZUlDz4pAMxW65CNVt8G7Sc0O77xHo+TM+EvY9raaz5H7icT9lGQZIRwkP0AWhYKxQ/godw==","signatures":[{"sig":"MEQCIFN4lDA+nk/xC+in3hsiWJovbpd0GNOnE4mT3uNF6FEUAiAr8z9/nE1vRv2UKWaH+eVMPZqkvQ+CJK8BsLU3veJzkA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fuse-data-attributes@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":14776},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"b630e17d1fad413043801e80ed1c1a0c5fe1d4b3","scripts":{"dev":"tsup-node --watch","lint":"biome lint && tsc --noEmit","test":"vitest --run","build":"tsup-node","pretest":"npm run build","posttest":"npm run lint","test:watch":"vitest","prepublishOnly":"node ../../scripts/compile-readme.ts"},"_npmUser":{"name":"kawikabader","email":"ekbader@gmail.com"},"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"_npmVersion":"11.6.2","description":"Introduce the received props as data-attributes on the rendered element","directories":{},"_nodeVersion":"23.11.1","dependencies":{"dashify":"^2.0.0","use-deep-compare":"^1.3.0","@bento/to-attribute-value":"^0.1.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/use-data-attributes_0.1.1_1762462137570_0.4682030714724168","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-10-24T15:15:32.317Z","modified":"2025-12-18T16:37:31.832Z","0.1.0":"2025-10-24T15:15:32.587Z","0.1.1":"2025-11-06T20:48:57.750Z"},"bugs":{"url":"https://github.com/godaddy/bento/issues"},"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","homepage":"https://github.com/godaddy/bento#readme","keywords":["attributes","bento","component","data","hook","library","react"],"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"description":"Introduce the received props as data-attributes on the rendered element","maintainers":[{"email":"rmarkins@godaddy.com","name":"rmarkins"},{"email":"npmjs@3rd-Eden.com","name":"3rdeden"},{"email":"rmarkins@gmail.com","name":"rxmarbles"},{"email":"ekbader@gmail.com","name":"kawikabader"}],"readme":"# Data Attributes\n\nThe `@bento/use-data-attributes` package provides a hook that automatically\nconverts a component’s props into `data-` attributes. This allows components to\nexpose their internal state to the DOM, making debugging and styling components\neasier.\n\n## Installation\n\n```shell\nnpm install --save @bento/use-data-attributes\n```\n\n## useDataAttributes\n\nThe `useDataAttributes` automatically transforms any given `object` into its\n`data-` attribute equivalent, transforming the values into strings. The resulting\nobject only contains the `data-` prefixed attributes.\n\nIt's worth noting that this hook does not merge the created `data-` attributes\nwith the existing ones. The user is left to decide on the correct merge strategy.\n\nThe `useDataAttributes` hook takes an object with the following arguments:\n\nAs the `data-` attributes end up in the DOM, their values are automatically\ntransformed into strings. This is done using the `@bento/as-value-attribute`\npackage. The package automatically formats the `data` based on the type of the\nvalue given.\n\n<Source language='tsx' code={ SourceContainer } />","readmeFilename":"README.md"}