To help you get started, we've collected the most common ways that style-value-types is being used within popular public projects.

Popmotion / popmotion / packages / popmotion / src / action / vector.ts View on Github

const getActionCreator = (prop: any) => {
  // Pattern matching would be quite lovely here
  if (typeof prop === 'number') {
    return createAction;
  } else if (Array.isArray(prop)) {
    return createArrayAction;
  } else if (isUnitProp(prop)) {
    return createUnitAction;
  } else if (color.test(prop)) {
    return createColorAction;
  } else if (complex.test(prop)) {
    return createComplexAction;
  } else if (typeof prop === 'object') {
    return createObjectAction;
  } else {
    return createAction;
  }
};

View more ways to use style-value-types

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: Returns true if the provided value is of that type.
• parse: Returns the value in a format suitable for animation. Either a number or { [key: string]: number }.

And one of:

• transform: The reverse of parse. Accepts a number or map of named numbers and converts that into the value type.
• createTransformer: Accepts a value and returns a transform 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 between 0 and 1
• 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 either hex, hsla or rgba type
• degrees: String ending in deg
• hex: String beginning with # and followed by 3 or 6-digit hex code
• hsla: String with valid hsla property
• percent: String ending in %
• px: String ending in px
• scale: Number with a default of 1 instead of 0
• rgbUnit: Integer between 1 and 255
• rgba: String in rgba(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.