{"_id":"react-only-html-props","_rev":"2-542ef18c72bbe90e6afa5b33213efcd4","name":"react-only-html-props","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"react-only-html-props","version":"1.0.0","description":"ohp allows to filter props to get only the react html props.","main":"./src/index.js","scripts":{"test":"jest","build":"ttsc -p .","coveralls":"jest --coverage && cat ./coverage/lcov.info | coveralls"},"author":{"name":"Augustin de Latrollière"},"license":"ISC","keywords":["react","components"],"repository":{"type":"git","url":"git+ssh://git@github.com/augustindlt/react-only-html-props.git"},"bugs":{"url":"https://github.com/augustindlt/react-only-html-props/issues"},"homepage":"https://github.com/augustindlt/react-only-html-props#readme","devDependencies":{"@types/react":"^16.9.23","coveralls":"^3.0.9","jest":"^25.1.0","react":"^16.13.0","ts-transformer-keys":"^0.4.1","ttypescript":"^1.5.10","typescript":"^3.8.3"},"gitHead":"724243fc5aa2c52daa38403290c3ebc285807dae","_id":"react-only-html-props@1.0.0","_nodeVersion":"13.5.0","_npmVersion":"6.13.4","_npmUser":{"name":"augustindlt","email":"agitmdlt@gmail.com"},"dist":{"integrity":"sha512-wohfaV3VHMv9WgcvRN784n09pzMRZUI6uvUYPa+49O/Dy+0CIRaeKyOEYM+RkBlQ8SQONofHuUL3wCkuvuaokw==","shasum":"6138ec55b2c4c37a9543ace8135e3a14ff5d0f5b","tarball":"https://registry.npmjs.org/react-only-html-props/-/react-only-html-props-1.0.0.tgz","fileCount":11,"unpackedSize":10556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeW9+9CRA9TVsSAnZWagAA0dcQAIDvK1vg2KSWOWFipOdg\n8cqG/tkLsytmUV5x4KrV8HSoT2QQX5G4w0N0/+wvvSG05s0Elw1dGwazdjJ2\nfClfDwft4uGYA685Cl4AA1N9QoDyOvpLHv0R9qqgm9ruiaTijXl4BX444WQ3\nXA3nHJKoRRgX/v7hAtUVrKUsxngbXgjjGCTryL99pRPNF5C2HG3d+TxaZcyr\nV9a6EeoUCl7mRTrt1dUAEXQDmHkpB3nLJn4T0Pp+PQ4ehLB9ZcS7ZH3kXvKZ\nAMExCnhq53NJJ4hpZUyBOXR1Yt3L/ErPuA8pSK6Bu1d2rnmXsPFwrCc/SKR6\nuW2fOY+n1lZXCrRUxvdltU+bwpxxBNJtaRUWwEZtMyDQAFRDEU1qW57pqbvE\npizRDBSnYgcSZPfvABIbEAxNJzAzWbqRrenCJtj7Ndv+K6Uq39DzoOcMXdHw\n68vIV+aY54z6F1Vjc3ZDVxMNvp5EMNefNuDR787nsHLDuGFia3wYSZlMPJdA\n57AMN3rdTOQsEk3MlbwGZugcGKItSP2oyqxjz6jWoVGpHSM8GdJKUYa8okZ/\nFyDtOoeXvgroYqavWvFpPzpVNx9QjWK95062+WdxgvRQ2RqE49TDr7LMrvOA\nRWSf0TlP26UKcbrZ63Dn7bQFek3iO7vrqhczoDUe8gw459licgA57qELTZJg\nPyT3\r\n=Gaz9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9oIRD/1Y+UnxnO9I/jtJes/RrEv/Lx1UYHweocAiutAIhALuSKdLfna+1in8OdymV0Ss/KNLmOUQtWL6duHEBfM9x"}]},"maintainers":[{"name":"augustindlt","email":"agitmdlt@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-only-html-props_1.0.0_1583079357237_0.6644995183762175"},"_hasShrinkwrap":false},"1.0.1":{"name":"react-only-html-props","version":"1.0.1","description":"ohp allows to filter props to get only the react html props.","main":"./lib/index.js","scripts":{"test":"jest","build":"ttsc -p .","coveralls":"jest --coverage && cat ./coverage/lcov.info | coveralls"},"author":{"name":"Augustin de Latrollière"},"license":"ISC","keywords":["react","components"],"repository":{"type":"git","url":"git+ssh://git@github.com/augustindlt/react-only-html-props.git"},"bugs":{"url":"https://github.com/augustindlt/react-only-html-props/issues"},"homepage":"https://github.com/augustindlt/react-only-html-props#readme","devDependencies":{"@types/react":"^16.9.23","coveralls":"^3.0.9","jest":"^25.1.0","react":"^16.13.0","ts-transformer-keys":"^0.4.1","ttypescript":"^1.5.10","typescript":"^3.8.3"},"gitHead":"88b08a6ef1f93dcfd9521d13c69a6d0c9db28db1","_id":"react-only-html-props@1.0.1","_nodeVersion":"13.5.0","_npmVersion":"6.13.4","_npmUser":{"name":"augustindlt","email":"agitmdlt@gmail.com"},"dist":{"integrity":"sha512-ukdM5KbnwatHtmCSCYzON+R5dnEaM3NyuJHfqagAQl0SRwCCyaLdXuEtFEb66oaoXKckmMKRxlSbGPhrzw3lhQ==","shasum":"edf6e8e25c7974f72b975f5a656a8249bc9bc29c","tarball":"https://registry.npmjs.org/react-only-html-props/-/react-only-html-props-1.0.1.tgz","fileCount":11,"unpackedSize":10556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXNZvCRA9TVsSAnZWagAADx8P/1ePFTyIUCTVx23393HD\nkTarIk5pXe5ajH9bvhYYnXcO8hX4Kfb1glKIPGel2AL8TK/K4cI1jGXlGlq2\nozvtmyDvwMYApd4ZdICgcdpjQiNbYTCv795iP3TWPZdEHxmJtZDizbXyaWNS\n9NJuQdgFi5XP3YrE9NOLdAJgCoZRwQqCm+gyEeXn+ZnCu2GSvdffKQqudDLB\nibFkLdbW8Z5LVdaPg9f+PkjOr3pjRygsVvjBlG5qWMmR2PPSyd7l7H5liYql\n3WfH/kF1F9rScPDRBcwvhS2ci8tJHYevOsuk++ZUt0Iy+HD0amKSKOrUb/DU\n33rZxRGjy2QS5Qvrd5435MU/DOMVHvzQlA6agJw+mDCbIT3NFXMZeIs9U/7d\ni5/UmVOJurVl+XSAK619oBdzAxzankf8Dz7mQHtzvm3JfNlrG9Dn6XxokXr2\n5cmm3zuxubOxY9pn8IBwO/V3062DPLQmOyK5TQt/YuN9rsUqlxq/CpOhLhz9\naj8zsdWdgqqLmo+FSLqIpKVNHlLYcA5JkOMx7POxPMDnafPC3zDTvBKOv5GK\nLIcUaEkvW5mS1Bu+oWIGXeFqeYonoq6B/8eN/sLr+qZR+uUG0KCcxSBXfKA0\nar9k2nfBUXgprnugFUl2pc21NoB5vko1TJgIxUuD1YRRu6WijsaqauGvlNm0\nMv58\r\n=eA5n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMwUGgPZSpiz5ya8ZaiQHn+nzRDojLBDR5Nx6lIFyO6AiAvpGzIpTuTlaKFuEHNBsEWL51Ky3Vk4/Apk43iwF35nA=="}]},"maintainers":[{"name":"augustindlt","email":"agitmdlt@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-only-html-props_1.0.1_1583142511231_0.5353782855209199"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-01T16:15:57.205Z","1.0.0":"2020-03-01T16:15:57.345Z","modified":"2022-05-15T00:55:36.150Z","1.0.1":"2020-03-02T09:48:31.329Z"},"maintainers":[{"name":"augustindlt","email":"agitmdlt@gmail.com"}],"description":"ohp allows to filter props to get only the react html props.","homepage":"https://github.com/augustindlt/react-only-html-props#readme","keywords":["react","components"],"repository":{"type":"git","url":"git+ssh://git@github.com/augustindlt/react-only-html-props.git"},"author":{"name":"Augustin de Latrollière"},"bugs":{"url":"https://github.com/augustindlt/react-only-html-props/issues"},"license":"ISC","readme":"## react-only-html-props\n\n![Build Status](https://img.shields.io/circleci/build/github/augustindlt/react-only-html-props)\n[![Coverage Status](https://coveralls.io/repos/github/augustindlt/react-only-html-props/badge.svg?branch=master)](https://coveralls.io/github/augustindlt/react-only-html-props?branch=master)\n[![NPM Version](https://img.shields.io/npm/v/react-only-html-props)](https://www.npmjs.com/package/react-only-html-props)\n\nohp allows to filter props to get only the react html props.\n\n### Problem :\n\n```js\nimport React, { useState } from \"react\";\n\nconst ArticlesList = props => {\n  return (\n    // source of the problem ({...props})\n    <div {...props}>\n      <ul>\n        {props.articles.map((article, i) => (\n          <li key={i}>{article.title}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nconst App = () => {\n  const articles = [{ title: \"My super article\" }, { title: \"Lorem ipsum\" }];\n  const [, setEditingArticle] = useState();\n  return (\n    <div className=\"App\">\n      <ArticlesList\n        articles={articles}\n        style={{ background: \"#fff\" }}\n        setEditingArticle={setEditingArticle}\n      />\n    </div>\n  );\n};\n\nexport default App;\n```\n\nThe code below will trigger this warning :\n\n```\nWarning: React does not recognize the `setEditingArticle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `seteditingarticle` instead. If you accidentally passed it from a parent component, remove it from the DOM element.\n```\n\n### Fix :\n\n```js\nimport React, { useState } from \"react\";\nimport { ohp } from \"react-only-html-props\";\n\nconst ArticlesList = props => {\n  return (\n    // solution of the problem ({...ohp(props)})\n    <div {...ohp(props)}>\n      <ul>\n        {props.articles.map((article, i) => (\n          <li key={i}>{article.title}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nconst App = () => {\n  const articles = [{ title: \"My super article\" }, { title: \"Lorem ipsum\" }];\n  const [, setEditingArticle] = useState();\n  return (\n    <div className=\"App\">\n      <ArticlesList\n        articles={articles}\n        style={{ background: \"#fff\" }}\n        setEditingArticle={setEditingArticle}\n      />\n    </div>\n  );\n};\n\nexport default App;\n```\n","readmeFilename":"README.md"}