npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

smart-handlebars

v1.0.5

Published

'smart-handlebars' is a powerful Handlebars templating extension that enhances your frontend development capabilities. It extends the standard Handlebars functionality with a suite of additional functions, making it a versatile tool for web developers. Wi

Downloads

171

Readme

smart-handlebars

This npm package provides a collection of useful Handlebars.js helpers to perform common operations in your templates. These helpers can be used to simplify and enhance your Handlebars templates.

Installation

You can install the package using npm:

npm install smart-handlebars

Usage

To use the provided helpers in your Handlebars templates, first, import the package:

Helper Functions

Addition

Description: Adds the value to the variable in the template context.

Syntax:

{{addition key val}}

Example:

{{addition "total" 10}}

This will add 10 to the "total" variable in the template context.

Subtraction

Description: Subtracts the value from the variable in the template context.

Syntax:

{{subtraction key val}}

Example:

{{subtraction "balance" 5}}

This will subtract 5 from the "balance" variable in the template context.

Round

Description: Rounds a number to the nearest integer.

Syntax:

{{round val}}

Example:

{{round 3.7}}

This will round 3.7 to 4

Ceil

Description: Rounds a number up to the nearest integer.

Syntax:

{{ceil val}}

Example:

{{ceil 2.3}}

This will round 2.3 up to 3.

Floor

Description: Rounds a number down to the nearest integer.

Syntax:

{{floor val}}

Example:

{{floor 4.8}}

This will round 4.8 down to 4.

Percentage

Description: Calculates the percentage of parVal relative to totVal. Syntax:

{{percentage parVal totVal}}

Example:

{{percentage 25 100}}

This will calculate the percentage of 25 relative to 100, resulting in 25%.

toFixed

Description: Formats a number to a fixed number of decimal places. Syntax:

{{toFixed val num}}

Example:

{{toFixed 3.14159 2}}

This will format 3.14159 to two decimal places, resulting in "3.14".

toUpperCase

Description: Converts a string to uppercase. Syntax:

{{toUpperCase str}}

Example:

{{toUpperCase "Hello World"}}

This will convert "Hello World" to "HELLO WORLD".

toLowerCase

Description: Converts a string to lowercase. Syntax:

{{toLowerCase str}}

Example:

{{toLowerCase "Hello World"}}

This will convert "Hello World" to "hello world".

Avg

Description: Calculates the average of a sum of values. Syntax:

{{avg sum len}}

Example:

{{avg 30 5}}

This will calculate the average of 30 (sum) and 5 (len), resulting in 6.

getNumberSuffix

Description: Returns the appropriate suffix for a given number (e.g., "st", "nd", "rd", or "th"). Syntax:

{{getNumberSuffix number}}

Example:

{{getNumberSuffix 21}}

This will return "st" as the suffix for the number 21.

inc

Description: Increments the given value by 1.

Syntax:

{{inc value}}

Example:

{{inc 5}}

This will increment the value 5 by 1, resulting in 6.

ifCond

Description: Allows you to create conditional statements in your Handlebars templates. It compares two values using various operators and executes the appropriate block of code based on the comparison result.

Syntax:

{{#ifCond v1 operator v2}}
<!-- Code to execute when the condition is true -->
{{else}}
<!-- Code to execute when the condition is false -->
{{/ifCond}}

Example: Equal (==) Operator

{{#ifCond 5 '==' 5}} The values are equal. {{else}} The values are not equal. {{/ifCond}}

This will output: "The values are equal." Not Equal (!=) Operator

{{#ifCond 5 '!=' 3}} The values are not equal. {{else}} The values are equal. {{/ifCond}}

This will output: "The values are not equal."

You can use various operators, including ==, ===, !=, !==, <, <=, >, >=, &&, and ||, to create different conditional statements in your templates.

-- With these descriptions and usage examples, users of your npm package will have a clear understanding of how to use each helper function in their HTML templates.

inWords

Description: Converts a number into words representation.

Syntax:

{{inWords num}}

Example:

{{inWords 12345}}

This will convert the number 12345 into "Twelve Thousand Three Hundred Forty-Five Only".

stringReplace Handlebars Helper

Overview

The stringReplace helper is a custom Handlebars function that replaces all occurrences of a specific substring within a given string with another substring. This can be especially useful when dynamically manipulating text inside templates.

Usage

Syntax

{{stringReplace str strToReplace replaceWith}}

**Example:** ```html
{{stringReplace 'Hello Handlebars' 'Handlebars' 'World'}}