Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simplified custom DOMTokenList implementation.
const forEach = Array.prototype.forEach;
module.exports = class TokenList {
constructor(){
this.tokens = {};
this.add.apply(this, arguments);
}
add(){
const { tokens } = this;
forEach.call(arguments, token => {
tokens[token] = true;
});
return this;
}
remove(){
const { tokens } = this;
forEach.call(arguments, token => {
delete tokens[token];
});
return this;
}
contains(token){
return Boolean(this.tokens[token]);
}
toggle(token, force){
if(typeof force !== `undefined`){
if(force){
this.add(token);
return true;
}else{
this.remove(token);
return false;
}
}
if(this.contains(token)){
this.remove(token);
return false;
}
this.add(token);
return true;
}
get value(){
return Object.keys(this.tokens).join(` `);
}
replace(oldToken, newToken){
this.remove(oldToken);
this.add(newToken);
return this;
}
item(index){
return Object.keys(this.tokens)[index];
}
};
const TokenList = require(`./TokenList`);
module.exports = function MyComponent(props){
const classList = new TokenList(`class-a`);
if(condition) classList.add(`class-b`);
return <div class={classList.value} />;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment