emphasizer

React style emphasizer

Usage

Installation:

npm install emphasizer

LIVE DEMO

Glossary

• emphasizeStyle()
• emphasizeStyleProperty()
• Suported styles
• emphasizeNumber()

emphasizeStyle(...)

function emphasizeStyle(fromStyle: React.CSSProperties, toStyle: React.CSSProperties, rate: number): React.CSSProperties;

Parameters:

• fromStyle: style with lowest significance
• toStyle: style with highest significance
• rate: rate of emphasized style. Must be fraction from 0 to 1

Returns: emphasized style

function emphasizeStyle(
    fromStyle: React.CSSProperties,
    toStyle: React.CSSProperties,
    fromRate: number,
    toRate: number,
    rate: number,
): React.CSSProperties;

Parameters:

• fromStyle: style with lowest significance
• toStyle: style with highest significance
• fromRate: min rate value
• toRate: max rate value
• rate: rate of emphasized style. Must be value from fromRate to toRate

Returns: emphasized style

Example

expect(
    emphasizeStyle(
        {
            width: '8px',
            margin: '2px 2px',
            color: '#222222',
            border: '0px solid #000000',
        },
        {
            width: '12px',
            margin: '6px 6px',
            color: '#888888',
            border: '10px solid #888888',
        },
        0.5,
    ),
).toMatchObject({
    width: '10px',
    margin: '4px 4px',
    color: '#555555',
    border: '5px solid #444444',
});

emphasizeStyleProperty(...)

function emphasizeStyleProperty(
    name: string,
    fromValue: string | number,
    toValue: string | number,
    rate: number
): string | number | undefined;

Parameters:

• name: style property name
• fromValue: style property value with lowest significance
• toValue: style property value with highest significance
• rate: rate of emphasized style property. Must be fraction from 0 to 1

Returns: emphasized style property value

function emphasizeStyleProperty(
    name: string,
    fromValue: string | number,
    toValue: string | number,
    fromRate: number,
    toRate: number,
    rate: number,
): string | number | undefined;

Parameters:

• name: style property name
• fromValue: style property value with lowest significance
• toValue: style property value with highest significance
• fromRate: min rate value
• toRate: max rate value
• rate: rate of emphasized style property. Must be value from fromRate to toRate

Returns: emphasized style property value

Example

// width
emphasizeStyleProperty('width', '8px', '12px', 0.5); // => '10px'
emphasizeStyleProperty('width', '8px', '12px', 0, 2, 1); // => '10px'

emphasizeStyleProperty('margin', '8px 8px', '12px 12px', 0.5); // => '10px 10px'
emphasizeStyleProperty('margin', '8px 8px 8px 8px', '12px 12px 12px 12px', 0.5); // =>  '10px 10px 10px 10px'

// color
emphasizeStyleProperty('color', '#222222', '#444444', 0.5); // => '#333333'
emphasizeStyleProperty('color', 'green', 'blue', 0.5); // => '#004080'
emphasizeStyleProperty('color', 'rgb(0,0,0)', 'rgb(100,100,100)', 0.5); // => '#323232'

// border
emphasizeStyleProperty('border', '0px solid #000000', '10px solid #888888', 0.5); // => '5px solid #444444'

Suported styles:

width, minWidth, maxWidth, height, minHeight, maxHeight, border, borderColor, borderBottom, borderBottomColor,
borderBottomWidth, borderLeft, borderLeftColor, borderLeftWidth, borderRight, borderRightColor, borderRightWidth,
borderTop, borderTopColor, borderTopWidth, borderRadius, borderBottomLeftRadius, borderBottomRightRadius,
borderTopLeftRadius, borderTopRightRadius, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, margin,
marginBottom, marginLeft, marginRight, marginTop, bottom, left, right, top, color, backgroundColor, caretColor,
outlineColor, textDecorationColor, fontSize, boxShadow

emphasizeNumber(...)

function emphasizeNumber(fromValue: number, toValue: number, rate: number): number;

Parameters:

• fromValue: value with lowest significance
• toValue: value with highest significance
• rate: rate of emphasized value. Must be fraction from 0 to 1

Returns: emphasized value

function emphasizeNumber(fromValue: number, toValue: number, fromRate: number, toRate: number, rate: number): number;

Parameters:

• fromValue: value with lowest significance
• toValue: value with highest significance
• fromRate: min rate value
• toRate: max rate value
• rate: rate of emphasized style property. Must be value from fromRate to toRate

Returns: emphasized value

Example

emphasizeNumber(0, 10, 0.5); // => 5
emphasizeNumber(0, 10, 2, 4, 3); // => 5