2.0.0 • Published 5 years ago
react-dom-props v2.0.0
react-dom-props
We cannot set {...props} to DOM Element directly as there might be some non-supported props. And it would be tedious to map them one by one.
In case of single DOM Element we would like to manipulate inside a component, react-dom-props
provides what you need. It will simply pick supported DOM props as listed in https://reactjs.org/docs/dom-elements.html
Install
yarn add react-dom-props
Usage
// simply import from package if you need both of them
import { pickHtmlProps, pickSvgProps } from 'react-dom-props';
// if you just need one of them, import the member explictly like below to reduce bundle size
import { pickHtmlProps } from 'react-dom-props/dist/pickHtmlProps';
import { pickSvgProps } from 'react-dom-props/dist/pickSvgProps';
export const MyComponent = props => {
// some logic here
// pick html or svg props supported by React
const htmlProps = pickHtmlProps(props);
const svgProps = pickSvgProps(props);
// then pass htmlProps or svgProps to the DOM element you would like to manipulate
return (
// html tag
<div {...htmlProps} />
// OR svg tag
<svg {...svgProps} />
);
};