Never Print Magazines

    react-classer

    0.1.0 • Public • Published

    CSS Module Class Lister

    Build Status dependencies Status devDependencies Status License: MIT

    Add multiple classes from CSS module style objects

    Adding multiple classes from CSS module style objects has never been easier and as readable

    Installation

    npm install classer
    

    Usage

    import React from 'react';
    import styles from './mystyles.module.css';
    import classer from 'classer';
     
    // console.log(styles);
    // sample console output =>
    // {
    //   App: 'App_App__3TjUG',
    //   'd-flex-c': 'App_d-flex-c__xpDp1',
    // };
     
    const classes = classer(styles); // Can be any name, doesn't have to be classes
     
    const App = props => {
      return (
        <div {...classes('App', 'bold', 'd-flex-c')}>
          <p>Blah Blah Blah</p>
        </div>
      );
    };
     
    export default App;

    Note: 'bold' is ignored since it is not defined in styles.module.css

    Edit: As of version 1.1.0 undefined classes are kept and added but obviously without the hash

    This results in:

    <div class="App_App__3TjUG bold App_d-flex-c__xpDp1"><p>Blah Blah Blah</p></div>

    Note: The created function accepts multiple individual strings, arrays and spaced strings or a mixture of these as valid input. Eg. All the different argument formats below are valid.

    const classes = classer(styles);  // Can be any name, doesn't have to be classes
     
    const App = (props) => {
        return (
          <div {...classes( 'App', 'bold', 'd-flex-c' )}>
          OR
          <div {...classes( 'App bold d-flex-c' )}>
          OR
          <div {...classes( ['App', 'bold', 'd-flex-c'] )}>
          OR
          <div {...classes( ['App', 'bold'], 'd-flex-c') }>
          OR
          <div {...classes( ['App'], 'bold d-flex-c') }>
          OR
          <div {...classes( ['App bold'], 'd-flex-c') }>

    It can be used for conditional classes by having your condition statement generate an array of classes which you use as the argument for your classes(or whatever you name it) function.

    E.g.

    let conditionalClasses = [];
    if (condition) {
      conditionalClasses.push('a-class', 'b-class');
    } else {
      conditionalClasses.push('b-class', 'c-class');
    }

    OR

    let conditionalClasses = [];
    if (condition) {
      conditionalClasses = ['a-class', 'b-class'];
    } else {
      conditionalClasses = ['b-class', 'c-class'];
    }

    Then use conditionalClasses like this:

    const App = props => {
      return (
        <div {...classes(conditionalClasses)}>
          <p>Blah Blah Blah</p>
        </div>
      );
    };

    License

    MIT © Dinesh Pandiyan

    Install

    npm i react-classer

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    7.18 kB

    Total Files

    8

    Last publish

    Collaborators

    • dudeonyx