Template Helpers

Introduction

Template helpers are used as part of component templating and provide access to a standard set of utilities useful for manipulating template data.

Templating Guide To learn how to use global helpers in templates see the dedicated user guide for template helpers

Installation

Template helpers are part of the templating package and is a standalone package that can be used without any other dependencies.

npm install @semantic-ui/templating

Usage

Template helpers can be used directly from any template

{formatDate myDate 'h:mm A'}

Custom Helpers

You can extend the template system by registering your own helper functions.

registerHelper

function registerHelper(name, fn)

Register a single template helper function.

Parameters

Example

import { registerHelper } from '@semantic-ui/templating';

registerHelper('formatMoney', (amount, currency = 'USD') => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency
  }).format(amount);
});

registerHelpers

function registerHelpers(helpers)

Register multiple template helper functions at once.

Parameters

Example

import { registerHelpers } from '@semantic-ui/templating';

registerHelpers({
  initials: (name) => name.split(' ').map(n => n[0]).join('').toUpperCase(),
  randomId: () => Math.random().toString(36).substr(2, 9)
});

Helper Categories