1.1.6 • Published 9 years ago

stylenames v1.1.6

Weekly downloads
3,445
License
MIT
Repository
github
Last release
9 years ago

##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%; '
1.1.6

9 years ago

1.1.5

10 years ago

1.1.4

10 years ago

1.1.3

10 years ago

1.1.2

10 years ago

1.1.1

10 years ago

1.1.0

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago