How to use the skatejs.h function in skatejs

}),
      h('div', {
          class: `emojis-wrapper ${visible}`
        }, h('div', {
          class: 'header'
        }, h('input', {
          type: 'search',
          oninput: this.onSearch(this),
          class: 'emoji-search'
        }), h('sk-spinner', {
          class: spinnerClass,
          type: 'rect',
          color: '#aaa',
          style: 'width: 30px; height: 30px;'
        })),
        h('div', {
          class: `emojis-content`,
          onclick: this.onEmojiClick(this)
        }, h('ul', {
          class: `emoji-data ${contentVisible}`
        }, ...emojiContent), h('div', {
          class: `emoji-search-results ${isSearching}`
        }, searchResults)), h('div', {
          class: `categories ${contentVisible}`
        }, categoriesContent))
    ];
  }

createCategory(emojis, categoryName) {
    const content = emojis.map(e => {
      return h('i', e);
    });

    return h('li', {
      class: 'emoji-category-content',
      'data-category': categoryName
    }, h('div', {
      class: 'emoji-category-header'
    }, categoryName), h('div', {
      class: 'emojis'
    }, ...content));
  }

createCategory(emojis, categoryName) {
    const content = emojis.map(e => {
      return h('i', e);
    });

    return h('li', {
      class: 'emoji-category-content',
      'data-category': categoryName
    }, h('div', {
      class: 'emoji-category-header'
    }, categoryName), h('div', {
      class: 'emojis'
    }, ...content));
  }

createCategory(emojis, categoryName) {
    const content = emojis.map(e => {
      return h('i', e);
    });

    return h('li', {
      class: 'emoji-category-content',
      'data-category': categoryName
    }, h('div', {
      class: 'emoji-category-header'
    }, categoryName), h('div', {
      class: 'emojis'
    }, ...content));
  }

const content = emojis.map(e => {
      return h('i', e);
    });

styles: styles({
          textarea: {
            height: '30px',
            'font-size': '16px',
            padding: '10px'  
          }
        })
      }),
      h('img', {
        class: 'toggle',
        src: icons.people,
        onclick: this.toggle.bind(this)
      }),
      h('div', {
          class: `emojis-wrapper ${visible}`
        }, h('div', {
          class: 'header'
        }, h('input', {
          type: 'search',
          oninput: this.onSearch(this),
          class: 'emoji-search'
        }), h('sk-spinner', {
          class: spinnerClass,
          type: 'rect',
          color: '#aaa',
          style: 'width: 30px; height: 30px;'
        })),
        h('div', {
          class: `emojis-content`,
          onclick: this.onEmojiClick(this)
        }, h('ul', {
          class: `emoji-data ${contentVisible}`

}, h('div', {
          class: 'header'
        }, h('input', {
          type: 'search',
          oninput: this.onSearch(this),
          class: 'emoji-search'
        }), h('sk-spinner', {
          class: spinnerClass,
          type: 'rect',
          color: '#aaa',
          style: 'width: 30px; height: 30px;'
        })),
        h('div', {
          class: `emojis-content`,
          onclick: this.onEmojiClick(this)
        }, h('ul', {
          class: `emoji-data ${contentVisible}`
        }, ...emojiContent), h('div', {
          class: `emoji-search-results ${isSearching}`
        }, searchResults)), h('div', {
          class: `categories ${contentVisible}`
        }, categoriesContent))
    ];
  }

const categoriesContent = categories.map(c => {
      const active = this.activeCategory === c ? 'active' : '';

      return h('div', {
        style: `background-image: url(${icons[c]})`,
        class: `cat ${active}`,
        onclick: this.goToCategory(c)
      });
    });
    const searchResults = this.createCategory(this.searchResults, 'Search results');

renderCallback() {    
    const width = this.widthValue;
    const height = this.heightValue;
    const progress = Math.min(width, (this.value * width) / 100);
    const progressValue = this.showPercentage ? h('span', {class: 'percentage'}, `${Math.min(100, this.value)}%`) : null;
    const mergedStyles = styles + `:host {--color: ${this.color};}`;
    const animated = this.animated ? 'animated' : '';

    return [
      h('style', mergedStyles),
      h('div', {
        class: `wrapper ${animated}`
      }, h('div', {
        class: 'progress',
        style: {
          transform: `translateX(${progress}px)`
        }
      }), progressValue)
    ];
  }

})
      }),
      h('img', {
        class: 'toggle',
        src: icons.people,
        onclick: this.toggle.bind(this)
      }),
      h('div', {
          class: `emojis-wrapper ${visible}`
        }, h('div', {
          class: 'header'
        }, h('input', {
          type: 'search',
          oninput: this.onSearch(this),
          class: 'emoji-search'
        }), h('sk-spinner', {
          class: spinnerClass,
          type: 'rect',
          color: '#aaa',
          style: 'width: 30px; height: 30px;'
        })),
        h('div', {
          class: `emojis-content`,
          onclick: this.onEmojiClick(this)
        }, h('ul', {
          class: `emoji-data ${contentVisible}`
        }, ...emojiContent), h('div', {
          class: `emoji-search-results ${isSearching}`
        }, searchResults)), h('div', {
          class: `categories ${contentVisible}`
        }, categoriesContent))
    ];