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

@microsoft/fast-web-utilities

v6.0.0

Published

FAST web utilities

Downloads

407,010

Readme

FAST Web utilities

This package is a collection of utilities intended to be used for web projects.

Installation

npm i --save @microsoft/fast-web-utilities

Usage

DOM utilities

getKeyCode

The getKeyCode function gets the numeric key code associated with a keyboard event. This method is for use with DOM level 3 events that still use the deprecated keyCode property.

import { getKeyCode } from "@microsoft/fast-web-utilities";

handleKeyPress = (e) => {
    let keyCode = getKeyCode(e);

    // Do something based on keyCode value
}

HTML utilities

getClientRectWithMargin

The getClientRectWithMargin function gets the client bounding rectangle including any margins of an element.

import { getClientRectWithMargin } from "@microsoft/fast-web-utilities";

const itemWidth = getClientRectWithMargin(item).width;
const itemHeight = getClientRectWithMargin(item).height;

convertStylePropertyPixelsToNumber

The convertStylePropertyPixelsToNumber function will convert a property value from an elements computed style from pixels to a number value.

import { convertStylePropertyPixelsToNumber } from "@microsoft/fast-web-utilities";

const elementTopMargin = convertStylePropertyPixelsToNumber(style, "margin-top");

Key utilities

Key strings

Commonly used event.key values are available as individual exports. Additional key values will be added as needed.

import { keyEnter, keySpace } from "@microsoft/fast-web-utilities";

handleKeyPress = (e) => {
    switch (e.key) {
        case keySpace:
        case keyEnter:
            // Do something if key matches
            break;
    }
}

KeyCodes (enum)

Keycodes are deprecated and their use should be avoided. Use the individual string key values instead.

Localization utilities

Typescript enum

The Direction enum contains the ltr and rtl enum for use in a Typescript project.

import { Direction } from "@microsoft/fast-web-utilities";

let direction: Direction = Direction.ltr;

Number utilities

Limit

The limit function ensures that a value is between a min and max value. If the value is lower than min, min will be returned. If the value is greater than max, max will be retured.

import { limit } from "@microsoft/fast-web-utilities";
const incomingNumber; // 11 
const setNumberByLimit = limit(0, 10, incomingNumber); // returns 10

wrapInBounds

The wrapInBounds function keeps a given value within the bounds of a min and max value. If the value is larger than the max, the minimum value will be returned. If the value is smaller than the minimum, the maximum will be returned. Otherwise, the value is returned un-changed.

import { wrapInBounds } from "@microsoft/fast-web-utilities";
const slides; // 5
const index; // 5
const activeIndex = wrapInBounds(0, this.slides.length - 1, index) // returns 0

String utilities

Format

The format function builds a string from a format specifier and replacement parameters.

import { format } from "@microsoft/fast-web-utilities";

const formatterString = "View {0} {1}";

const newString = format(formatterString, "page", "4")); // "View page 4"

startsWith

The startsWith function checks to see if one string starts with another. The function is case sensitive.

import { startsWith } from "@microsoft/fast-web-utilities";

const matchIsFalse = startsWith("HelloWorld", "World"); // false
const matchIsTrue = startsWith("HelloWorld", "Hello"); // true

isNullOrWhiteSpace

The isNullOrWhiteSpace function determines if the specified string is undefined, null, empty, or whitespace. The function returns true if the value is undefined, null, empty, or whitespace, otherwise false.

import { isNullOrWhiteSpace } from "@microsoft/fast-web-utilities";

const myAnchor = document.querySelector("#id");
const checkWhitespace = isNullOrWhiteSpace(myAnchor.href);

pascalCase

The pascalCase function converts a string to Pascal Case

import { pascalCase } from "@microsoft/fast-web-utilities";

const hyphenatedToPascal = pascalCase("my-string");
const uppercaseToPascal = pascalCase("MY STRING");
const whitespaceToPascal = pascalCase(" my string ");

classNames

A utility for merging class names into a single string conditionally. Accepts any number of strings, functions that return strings and two index arrays where the first index is a string or function that returns a string, and the second index is a boolean.

import { classNames } from "@microsoft/fast-web-utilities";

// evaluates to "classOne classTwo classThree classFive"
const myJoinedClassNames = classNames(
    "classOne",
    () => "classTwo",
    ["classThree", true],
    ["classFour", false]
    [() => "classFive", true],
    [() => "classSix", false]
)