{"id":15396992,"url":"https://github.com/ryanhefner/clean-react-props","last_synced_at":"2025-04-15T22:31:04.312Z","repository":{"id":73826305,"uuid":"98657907","full_name":"ryanhefner/clean-react-props","owner":"ryanhefner","description":"🛁 Utility functions for passing clean React props to HTML and SVG elements.","archived":false,"fork":false,"pushed_at":"2020-03-11T16:04:35.000Z","size":573,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T03:41:40.794Z","etag":null,"topics":["clean","props","react","utility"],"latest_commit_sha":null,"homepage":"https://www.pkgstats.com/pkg:clean-react-props","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanhefner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"ryanhefner","patreon":"ryanhefner","open_collective":"ryanhefner","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-07-28T14:33:32.000Z","updated_at":"2022-11-17T11:39:32.000Z","dependencies_parsed_at":"2023-07-13T12:31:00.589Z","dependency_job_id":null,"html_url":"https://github.com/ryanhefner/clean-react-props","commit_stats":{"total_commits":135,"total_committers":4,"mean_commits":33.75,"dds":"0.36296296296296293","last_synced_commit":"b019fa9321043083ef93dc8696834d920e279fa1"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fclean-react-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fclean-react-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fclean-react-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Fclean-react-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanhefner","download_url":"https://codeload.github.com/ryanhefner/clean-react-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249165962,"owners_count":21223355,"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":["clean","props","react","utility"],"created_at":"2024-10-01T15:35:39.951Z","updated_at":"2025-04-15T22:31:03.941Z","avatar_url":"https://github.com/ryanhefner.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ryanhefner","https://patreon.com/ryanhefner","https://opencollective.com/ryanhefner"],"categories":[],"sub_categories":[],"readme":"# 🛁 clean-react-props\n\n![npm](https://img.shields.io/npm/v/clean-react-props?style=flat-square)\n![NPM](https://img.shields.io/npm/l/clean-react-props?style=flat-square)\n![npm](https://img.shields.io/npm/dt/clean-react-props?style=flat-square)\n![Coveralls github](https://img.shields.io/coveralls/github/ryanhefner/clean-react-props?style=flat-square)\n![CircleCI](https://img.shields.io/circleci/build/github/ryanhefner/clean-react-props?style=flat-square)\n![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/ryanhefner/clean-react-props?style=flat-square)\n\n\nUtility functions for passing clean React props to HTML and SVG elements.\n\nSince React 15.2.x, warnings are thrown when attributes are applied to HTMLElements\nthat are not natively supported by React. This utility helps you to prevent those\nwarnings and help you create consistent and clean components. You can read more\nabout it, [here](https://facebook.github.io/react/warnings/unknown-prop.html).\n\n## Install\n\nVia [npm](https://npmjs.com/package/clean-react-props):\n\n```sh\nnpm install --save clean-react-props\n```\n\nVia [Yarn](https://yarn.fyi/clean-react-props):\n\n```sh\nyarn add clean-react-props\n```\n\n## How to use\n\nWhen building components, it’s always a good idea know what properties your component\nexpects and confirm that they handle them properly. But, in some cases your component\ncould end up getting more than it asked for, that's where `clean-react-props` come\nin handy.\n\nIn order to cleanly compose your components, it's best if they keep the props chain\nalive (where necessary), and remove the props that are either specific to your component\nor in addition to what your component expects.\n\n### HTMLElements\n\n```js\nimport cleanProps from 'clean-react-props';\n\n...\n\n  render() {\n    const {\n      aProp,\n      anotherProp,\n      children,\n    } = this.props;\n\n    return (\n      \u003cdiv {...cleanProps(this.props)}\u003e\n        \u003cChildComponent aProp={aProp} /\u003e\n        \u003cOtherChildComponent anotherProp={anotherProp} /\u003e\n        {children}\n      \u003c/div\u003e\n    );\n  }\n\n...\n\n```\n\n### SVGElements\n\nReact is also opinionated about the attributes that it supports for SVGElements.\nSo, I’ve included a utility that you can use specifically for `\u003csvg\u003e` tags in your\ncode.\n\n```js\nimport { cleanSVGProps } from 'clean-react-props';\n\n...\n\n  render() {\n    return (\n      \u003csvg {...cleanSVGProps(this.props)} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 300 300\"\u003e\n        \u003ccircle cx=\"150\" cy=\"150\" r=\"150\" style=\"fill:#ffda00;\" /\u003e\n        \u003cellipse cx=\"95.7\" cy=\"93.5\" rx=\"10\" ry=\"27.5\" /\u003e\n        \u003cellipse cx=\"195.7\" cy=\"93.5\" rx=\"10\" ry=\"27.5\" /\u003e\n        \u003cpath d=\"M265 145.5c0 63.5-51.5 115-115 115S35 209 35 145.5\" style=\"fill:none;stroke:#000;stroke-width:6;stroke-miterlimit:10;\" /\u003e\n      \u003c/svg\u003e\n    );\n  }\n\n...\n\n```\n\n### Excluding props\n\nIn some cases, it’s handy to be able to exlude valid props from being applied to\nan element, in the event that prop is maybe used on a child element, or if for\nsome reason that component manages that prop differently. If you run into a spot\nwhere you ned to exclude some props, pass an array of the prop names you’d like\nto exclude.\n\n```js\nimport cleanProps from 'clean-react-props';\n\n...\n\n  render() {\n    const {\n      aProp,\n      anotherProp,\n      children,\n    } = this.props;\n\n    return (\n      \u003cdiv {...cleanProps(this.props, ['className'])}\u003e\n        \u003cChildComponent aProp={aProp} /\u003e\n        \u003cOtherChildComponent anotherProp={anotherProp} /\u003e\n        {children}\n      \u003c/div\u003e\n    );\n  }\n\n...\n\n```\n\n### Specifying custom attributes\n\nReact–as of 16.*–now supports custom attributes on components. Which means that\nas of that release, this package may not as useful as it once was, but it allows\nyou to be specific about the attributes that are applied to the rendered DOM\nelements. To specify custom attributes that you’d like to retain, just do the\nfollowing.\n\n```js\nimport cleanProps from `clean-react-props`;\n\n...\n\n  render() {\n    const {\n      aProp,\n      myCustomAttribute,\n      children,\n    } = this.props;\n\n    return (\n      \u003cdiv {...cleanProps(this.props, [], ['myCustomAttribute'])}\u003e\n        \u003cChildComponent aProp={aProp} /\u003e\n        {children}\n      \u003c/div\u003e\n    );\n  }\n\n...\n\n```\n\n## License\n\n[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Fclean-react-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanhefner%2Fclean-react-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Fclean-react-props/lists"}