style-value-types
v5.1.2
Published
Parsers, transformers and tests for special value types, eg: %, hex codes etc.
Downloads
6,368,406
Readme
Style Value Types
Parsers, transformers and tests for common style value types, eg: %, hex codes etc.
To help convert numerical values into commonly-used special value types, like px
or hex
, we provide an optional module called style-value-types
:
npm install style-value-types --save
Each value type has three functions:
test
: Returnstrue
if the provided value is of that type.parse
: Returns the value in a format suitable for animation. Either anumber
or{ [key: string]: number }
.
And one of:
transform
: The reverse ofparse
. Accepts anumber
or map of named numbers and converts that into the value type.createTransformer
: Accepts a value and returns atransform
based on that specific value.
Import
import { color } from 'style-value-types';
Example
// Test
color.test('#fff'); // true
color.test(0); // false
// Parse
color.parse('rgba(255, 255, 255, 0)');
// { red: 255, green: 255, blue: 255, alpha: 0 }
// Transform
color.transform({ hue: 200, saturation: 100, lightness: 50, alpha: 0.5 });
// 'hsla(200, 100%, 50%, 0.5)'
Included value types
alpha
:Number
between0
and1
complex
: Handles space and comma delimited values, like CSS box-shadow:'10px 10px inset #f00, 5px 5px 30px #fff'
, gradient or a path definition.color
:String
of eitherhex
,hsla
orrgba
typedegrees
:String
ending indeg
hex
:String
beginning with#
and followed by 3 or 6-digit hex codehsla
:String
with validhsla
propertypercent
:String
ending in%
px
:String
ending inpx
scale
:Number
with adefault
of1
instead of0
rgbUnit
: Integer between1
and255
rgba
: String inrgba(rgbUnit, rgbUnit, rgbUnit, alpha)
format
complex
The complex
value type is slightly different to the others. Instead of a transform
method, it has a createTransformer
method which returns the transform
method:
const svgPath = 'M150 0 L75 200';
const transform = complex.createTransformer(svgPath);
The returned transform
function is unique to the string given to it. When this function is provided an object of the same format as returned by complex.parse()
(in this example complex.parse(svgPath)
), it will use the original string as a template.