{"id":10639,"library":"clean-react-props","title":"Clean React Props","description":"clean-react-props is a utility package for React applications, currently at version 0.4.0, designed to filter out unknown or unwanted properties before they are passed to standard HTML or SVG DOM elements. Its primary purpose is to prevent React 15.2.x warnings (e.g., 'Warning: Unknown prop `myProp` on tag `div`') that arise when non-standard or component-specific props are inadvertently rendered onto native DOM elements. The library provides `cleanProps` for HTML and `cleanSVGProps` for SVG elements, allowing developers to ensure only valid attributes and event handlers are applied. While React 16 and later versions introduced support for custom attributes on DOM elements, mitigating some of the original necessity, `clean-react-props` remains useful for enforcing strict adherence to standard HTML/SVG attributes and for explicitly excluding props that should not be passed down. Releases are infrequent, primarily focusing on dependency updates and adding support for new standard attributes/events.","status":"maintenance","version":"0.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/ryanhefner/clean-react-props","tags":["javascript","react","utility","clean","props","attributes","events"],"install":[{"cmd":"npm install clean-react-props","lang":"bash","label":"npm"},{"cmd":"yarn add clean-react-props","lang":"bash","label":"yarn"},{"cmd":"pnpm add clean-react-props","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"cleanProps is the default export for cleaning HTML element props.","wrong":"import { cleanProps } from 'clean-react-props';","symbol":"cleanProps","correct":"import cleanProps from 'clean-react-props';"},{"note":"cleanSVGProps is a named export for cleaning SVG element props.","wrong":"import cleanSVGProps from 'clean-react-props';","symbol":"cleanSVGProps","correct":"import { cleanSVGProps } from 'clean-react-props';"},{"note":"While primarily documented with ESM imports, CommonJS is supported. Ensure correct handling of default vs. named exports.","wrong":"import cleanProps from 'clean-react-props'; // CommonJS environments\nconst cleanProps = require('clean-react-props').cleanProps;","symbol":"All functions (CommonJS)","correct":"const cleanProps = require('clean-react-props');\nconst { cleanSVGProps } = require('clean-react-props');"}],"quickstart":{"code":"import cleanProps from 'clean-react-props';\nimport React from 'react';\n\n// Example Component to demonstrate cleanProps usage\nfunction MyComponent({ aProp, anotherProp, className, children, onClick, ...rest }) {\n  // `aProp` and `anotherProp` are for internal component logic\n  // `className` is explicitly excluded from the div to be handled by a child or styled component\n  // `onClick` is a standard event handler, which cleanProps will retain\n  // `rest` might contain unknown/custom props that cleanProps will filter\n\n  return (\n    <div {...cleanProps({ ...rest, aProp, anotherProp, className, onClick }, ['className'])}>\n      <p>This div has clean props.</p>\n      <ChildComponent aProp={aProp} />\n      {children}\n      <button onClick={onClick}>Click Me</button>\n    </div>\n  );\n}\n\n// Example usage in an app context\nfunction App() {\n  const handleButtonClick = () => console.log('Button clicked!');\n  return (\n    <MyComponent\n      aProp=\"internal-value\"\n      anotherProp=\"another-internal\"\n      data-test-id=\"my-component-test\" // Valid custom attribute in React 16+\n      customAttribute=\"should-be-filtered\" // Likely filtered by cleanProps\n      onClick={handleButtonClick}\n      style={{ border: '1px solid blue' }}\n    >\n      <span>Hello, world!</span>\n    </MyComponent>\n  );\n}\n\n// In a real application, you would render this using ReactDOM.render\n// For demonstration, we'll log its representation.\nconsole.log('App component configured with clean-react-props:', <App />);","lang":"javascript","description":"Demonstrates basic usage of `cleanProps` to filter props passed to a DOM element, including how to explicitly exclude certain valid props."},"warnings":[{"fix":"Evaluate if you still need `clean-react-props` if your main goal is to pass custom attributes. React 16+ handles `data-*` and other non-standard attributes gracefully. Use `clean-react-props` if you specifically want to strip *all* non-standard props or filter specific valid props.","message":"React 16 and later versions introduced native support for custom attributes on HTML/SVG elements. This diminishes the primary use case of `clean-react-props` for developers who wish to pass custom `data-*` or other non-standard attributes directly to the DOM without warnings. The library remains useful for strict enforcement of standard attributes and explicit prop filtering.","severity":"gotcha","affected_versions":">=0.3.0"},{"fix":"Upgrade to `clean-react-props@0.3.2` or later to ensure patched dependencies are used. Regularly run `npm audit` or `yarn audit`.","message":"The package `braces` (a dependency of an indirect dependency) had a potential vulnerability (CVE-2018-1000006). This was addressed by `clean-react-props` updating its dependencies and specifically adding `braces@>=2.3.1` in `v0.3.2`.","severity":"deprecated","affected_versions":"<0.3.2"},{"fix":"Always pass an array of prop names to the second argument of `cleanProps(props, ['propToExclude'])` for any props you wish to retain or handle manually after cleaning.","message":"When using `cleanProps` or `cleanSVGProps`, any props intended for child components or that have special handling within the current component (e.g., `className` for a styled component wrapper) must be explicitly excluded via the second argument. If not excluded, they will be filtered out.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Wrap your DOM element's props with `cleanProps(this.props)` or `cleanSVGProps(this.props)` to automatically filter out unknown props. If `myCustomProp` is intended for a child component, ensure it's removed from the current component's props before spreading to the DOM element.","cause":"This is the core React warning that `clean-react-props` is designed to prevent. It occurs when a non-standard HTML attribute or a component-specific prop is passed directly to a native DOM element (e.g., a `div` or `span`) without being filtered.","error":"Warning: Received `myCustomProp` as a prop to a DOM element. If you intended to pass this as a custom attribute, etc."},{"fix":"For `cleanProps` (default export), use `import cleanProps from 'clean-react-props';` or `const cleanProps = require('clean-react-props');`. For `cleanSVGProps` (named export), use `import { cleanSVGProps } from 'clean-react-props';` or `const { cleanSVGProps } = require('clean-react-props');`.","cause":"This typically occurs if you attempt to import the default export `cleanProps` as a named export, or vice-versa for `cleanSVGProps` in an ESM context, or if using CommonJS `require` incorrectly.","error":"TypeError: cleanProps is not a function"},{"fix":"Ensure your custom event handlers are not passed directly to a native DOM element if `clean-react-props` is being used, or ensure they conform to standard React event naming conventions. If you need to pass a truly custom event handler to a custom component, extract it before applying `cleanProps` to a native DOM element.","cause":"`clean-react-props` filters based on a list of known valid HTML/SVG attributes and event handlers. If you define a custom event handler that isn't on React's (and thus the library's) whitelist, it will be stripped, and React might still warn if the original prop object contains it.","error":"Warning: Unknown event handler property `onMyCustomEvent`. Did you mean `onMycustomevent`?"}],"ecosystem":"npm"}