stylenames
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/stylenames package

1.1.6 • Public • Published

StyleNames

What does StyleNames?

In one short sentence: "StyleNames converts an object to a css style string."

Install

npm install stylenames -D

Import

import styleNames from 'stylenames';

StyleNames object - StyleGuide

    styleNames({
        'style-key':'style-value',
        
        // If the condition is false the style does not becomes used.
        'style-key':{
            'style-value': condition
        },
                    
        // Only the first value with true condition becomes used.
        'style-key':{
            'style-value1': condition,
            'style-value2': condition,
            'style-value3': condition,
             ...
        }
    });

Examples:

Without conditions:
  let styles1 = styleNames({
      height: '120px',
      width: '100px'
  });
  console.log(styles1); //--> ' height:120px;width:100px; '
With one condition
  let styles1 = styleNames({
      height: '120px',
      width: {
          '200px': false
      }
  });
  console.log(styles1); //--> ' height:120px '
 
  let styles2 = styleNames({
      height: '120px',
      width: {
          '200px': true
      }
  });
  console.log(styles2); //--> ' height:120px;width:200px; '
With more than one condition
    let itemCount = 0;
 
    let styleNamesConfig = {
        display: {
            'none': () => itemCount === 0
        },
        height: '120px',
        width: {
            '100px': () => itemCount <= 1,
            '200px': () => itemCount <= 2,
            '400px': () => itemCount <= 4,
            '100%': () => itemCount > 4
        }
    };
 
    console.log(styleNames(styleNamesConfig)); //--> ' display:none;height:120px;width:100px; '
 
    itemCount++; //1
    console.log(styleNames(styleNamesConfig)); //--> ' height:120px;width:100px; '
 
    itemCount++; //2
    console.log(styleNames(styleNamesConfig)); //--> ' height:120px;width:200px; '
 
    itemCount++; //3
    console.log(styleNames(styleNamesConfig)); //--> ' height:120px;width:400px; '
 
    itemCount += 12; //15
    console.log(styleNames(styleNamesConfig)); //--> ' height:120px;width:100%; '
 

Package Sidebar

Install

npm i stylenames

Weekly Downloads

1,728

Version

1.1.6

License

MIT

Last publish

Collaborators

  • kmathmann