is-style-prop-valid v0.0.7

is-style-prop-valid

Utilities for CSS style properties

Table of Contents

• Installation
• Usage
• Utilities
  • isStylePropValid(prop)
  • sanitizeStyleProps(props)
  • isUnitlessValue(prop)
  • convertUnitValue(prop, value)
• Related

Installation

npm install --save is-style-prop-valid

Usage

A great use-case for these utilities is to prepare object styles for libraries like Emotion or Style Components for use within React.

Example

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} />;
};

Utilities

isStylePropValid(prop)

Determines if the prop is valid style CSSProperty.

prop

Type: string

Example

import { isStylePropValid } from "is-style-prop-valid";

isStylePropValid("background");
// true

isStylePropValid("role");
// false

sanitizeStyleProps(props)

Removes non style CSSProperty props from an object. Converts non-unitless values to px values.

props

Type: object

Example

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
// }

isUnitlessValue(prop)

Determines if the CSSProperty is a unitless value. For example, lineHeight.

prop

Type: string

Example

import { isUnitlessValue } from "is-style-prop-valid";

isUnitlessValue("lineHeight");
// true

isUnitlessValue("padding");
// false

convertUnitValue(prop, value)

prop

Type: string

value

Type: number|string

Returns

Type: number|string

Example

import { convertUnitValue } from "is-style-prop-valid";

convertUnitValue("padding", 10);
// 10px

convertUnitValue("zIndex", 10);
// 10

Related

• @emotion/is-prop-valid