Utilities for CSS style properties
npm install --save is-style-prop-valid
A great use-case for these utilities is to prepare object styles for libraries like Emotion or Style Components for use within React.
import styled from "@emotion/styled";
import { sanitizeStyleProps } from "is-style-prop-valid";
const CustomView = styled.div({}, sanitizeStyleProps);
const Example = () => {
return <CustomView background="red" padding={10} />;
};
Determines if the prop is valid style CSSProperty.
Type: string
import { isStylePropValid } from "is-style-prop-valid";
isStylePropValid("background");
// true
isStylePropValid("role");
// false
Removes non style CSSProperty props from an object. Converts non-unitless values to px values.
Type: object
import { sanitizeStyleProps } from "is-style-prop-valid";
const props = {
background: "red",
onClick: () => undefined,
padding: 10,
zIndex: 50
};
sanitizeStyleProps(props);
// {
// background: 'red',
// padding: '10px',
// zIndex: 50
// }
Determines if the CSSProperty is a unitless value. For example, lineHeight
.
Type: string
import { isUnitlessValue } from "is-style-prop-valid";
isUnitlessValue("lineHeight");
// true
isUnitlessValue("padding");
// false
Type: string
Type: number
|string
Type: number
|string
import { convertUnitValue } from "is-style-prop-valid";
convertUnitValue("padding", 10);
// 10px
convertUnitValue("zIndex", 10);
// 10