Mithril.js multiple css class

Question

I'm new at mithril.js. I have a div, I want to add class "invalid" if ctrl.invalid()==true, and "hidden" if ctrl.hidden()==true.

If I use m('div', {class: ctrl.invalid() ? 'invalid' : '', class: ctrl.hidden()? 'hidden' : ''}), they override each other.

I can use m('div', {class: [ctrl.invalid()?'invalid':'', ctrl.focused()?'focused':''].join(' ')}), and it'll work, but it looks messy.

Is there an elegant solution for this? Thanks.

score 5 · Accepted Answer · answered Apr 11 '16 at 00:25

5

I recommend you to use classnames - a simple utility for that. You can define your classes in a nice way and it will merge everything for you. In your case it will be:

const myMergedClasses = classNames({
    invalid: ctrl.invalid(), 
    focused: ctrl.focused()
});
m('div', { class: myMergedClasses })

Beautiful?!

answered Apr 11 '16 at 00:25

Ross Khanas

1,491
2
15
23

That is pretty cool. I wish it was built into the mithril library. – real Apr 11 '16 at 21:07
2

@real the great thing with classnames is you can use *any library* and simply include it in your project! – Barney Apr 12 '16 at 14:29

score 1 · Answer 2 · answered Oct 29 '21 at 12:56

Very late to the game, but as an inspiration for others ending up here, I often do something like the following, just because it is:

simple to implement
easy to extend
easy to understand

view(): {
    const classes = 
        `${ctrl.invalid() ? '.invalid' : ''}` +
        `${ctrl.hidden()? '.hidden' : ''}`;
    return m(`div${classes}`);
}

score 0 · Answer 3 · answered Jan 08 '18 at 17:27

You can add a helper method to your Mithril component:

const myComponent = {
    css() {
        // Add some logic

        return 'class1 class2';
    },
    view() {
        return m('div', { class: this.css() });
    },
};

Or to the controller:

const ctrl = {
    css() {
        // Add some logic

        return 'class3';
    },
};

const myComponent = {
    view() {
        return m('div', { class: ctrl.css() });
    },
};

Choose whichever suits your case better.

You can also use the classnames utility, as suggested by Ross Khanas in his answer:

const myComponent = {
    css() {
        return classNames({
            invalid: ctrl.invalid(), 
            focused: ctrl.focused(),
        });
    },
    view() {
        return m('div', { class: this.css() });
    },
};

Or:

const ctrl = {
    css() {
        return classNames({
            invalid: this.invalid(), 
            focused: this.focused(),
        });
    },
    invalid() { /* ... */ },
    focused() { /* ... */ },
};

const myComponent = {
    view() {
        return m('div', { class: ctrl.css() });
    },
};

Mithril.js multiple css class

3 Answers3