@emotion/is-prop-valid

What is @emotion/is-prop-valid?

The @emotion/is-prop-valid package is a utility for checking if a given property is a valid HTML or SVG attribute. It is commonly used in CSS-in-JS libraries, such as Emotion, to filter out props that should not be passed to DOM elements to avoid React warnings about unknown DOM props.

What are @emotion/is-prop-valid's main functionalities?

Checking HTML validity of a prop

This feature allows you to check if a prop is a valid HTML attribute. It returns true for valid attributes like 'onClick' and false for non-standard or invalid attributes like 'randomPropName'.

import isPropValid from '@emotion/is-prop-valid';

console.log(isPropValid('onClick')); // true
console.log(isPropValid('randomPropName')); // false

Checking SVG validity of a prop

This feature allows you to check if a prop is a valid SVG attribute. It returns true for valid attributes like 'viewBox' and false for non-standard or invalid attributes like 'randomSVGProp'.

import isPropValid from '@emotion/is-prop-valid';

console.log(isPropValid('viewBox')); // true
console.log(isPropValid('randomSVGProp')); // false

Other packages similar to @emotion/is-prop-valid

prop-types

The prop-types package is used for runtime type checking for React props. While it doesn't provide the same functionality as @emotion/is-prop-valid, it is used to ensure that components receive props of the correct type.

styled-components

Styled-components is a CSS-in-JS library that allows you to write CSS code for components within JavaScript. It has a similar feature to @emotion/is-prop-valid where it filters out non-HTML attributes from being passed to DOM elements.

react-html-attributes

This package contains a list of all standard HTML attributes and can be used to check if a prop is a valid HTML attribute, similar to what @emotion/is-prop-valid does.

README

@emotion/is-prop-valid

Check whether a prop is valid for HTML and SVG elements

yarn add @emotion/is-prop-valid

import isPropValid from '@emotion/is-prop-valid'

isPropValid('href') // true

isPropValid('someRandomProp') // false