https://github.com/cncolder/react-dom-attrs

A filter pick react known dom attrs from props
https://github.com/cncolder/react-dom-attrs

react react-attrs react-dom react-dom-attrs react-props react-toolbox

Last synced: about 1 month ago
JSON representation

A filter pick react known dom attrs from props

• Host: GitHub
• URL: https://github.com/cncolder/react-dom-attrs
• Owner: cncolder
• License: mit
• Created: 2017-07-13T09:50:55.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-13T11:37:52.000Z (almost 9 years ago)
• Last Synced: 2025-10-11T17:44:23.978Z (8 months ago)
• Topics: react, react-attrs, react-dom, react-dom-attrs, react-props, react-toolbox
• Language: JavaScript
• Homepage:
• Size: 6.84 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React DOM Attrs

A filter pick react known dom attrs from props. Help you avoid [React Unknown Prop Warning](https://facebook.github.io/react/warnings/unknown-prop.html)

```

npm install --save react-dom-attrs

```

OR

```

yarn add react-dom-attrs

```

[![npm](https://img.shields.io/npm/v/react-dom-attrs.svg)](https://www.npmjs.com/package/react-dom-attrs)

![module formats: cjs](https://img.shields.io/badge/module%20formats-cjs-green.svg)

## Example

### API

```js

/**

 * @param {{}} props - React component props

 * @return {{}} - DOM safe attrs

 */

domAttrs(props: {}): {}

```

```js

const domAttrs = require('react-dom-attrs')

domAttrs({ width: 10, height: 10 }) // { width: 10, height: 10 }

domAttrs({ onClick: () => { } }) // { onClick: [Function: onClick] }

domAttrs({ bad: 10 }) // { }

```

### Full react example

```jsx

const domAttrs = require('react-dom-attrs')

const Card = props => {

  const { className, firstName, lastName, ...rest } = props

  // 'lol' in rest

  const attrs = domAttrs(rest)

  // 'lol' removed but width and height leave there

  return (

    


      Full Name: {firstName} {lastName}

    

  )

}


const App = () => (

  

)

```

## Limits

This module only pick DOM safe attrs and donot care what element you will pass to.

e.g.

```jsx

var Div = 


```


You will got

```html



```

## Acknowledgements


The attr list used by this project come from [styled-components](https://github.com/styled-components/styled-components). We'd like to thank styled components team ideas, code or inspiration.