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

@288-toolkit/ui

v5.2.3

Published

```sh npm i @288-toolkit/ui ```

Downloads

319

Readme

Ui

npm i @288-toolkit/ui

A collection of functions, actions and stores to manipulate ui.

$mounted

A store that tells you if a component has been mounted.

Credits: https://geoffrich.net/posts/svelte-lifecycle-examples/

$navigated

A store that returns true when the user has navigated at least once.

motionSafeScrollBehavior()

Returns the appropriate scroll behavior based on the user's preference for reduced motion.

Keys

A re-export of https://github.com/nfriend/ts-key-enum

Keyboard key names, corresponding to event.key (KeyboardEvent['key']).

focusableSelector

A CSS selector that matches all focusable elements.

Credit: https://stackoverflow.com/a/30753870

isFocusable()

Returns true if the given element is focusable.

const isFocusable: (el: HTMLElement) => boolean;

focalPointToObjectPosition()

Converts a focal point value between 0 and 1 to a CSS object-position value.

const focalPointToObjectPosition: (focalPoint: number) => string;

imageSizes()

Converts an array of ImageSizes into a string that can be used as the sizes attribute of an <img> element.

type ImageSize = {
	/**
	 * The displayed width of the image
	 */
	width: `${number}${ImageSizeUnits}`;
	/**
	 * An optional media query dictating when the image will be displayed
	 * at this width.
	 */
	mq?: `(${ImageSizeSupportedMediaQuery}: ${number}${ImageSizeMediaQueryUnits})`;
};

type ImageSizes = ImageSize[];

const imageSizes: (sizes: ImageSizes) => string;

initials()

Convert a name to initials.

/**
 * @param name The name to convert.
 * @param max The maximum length of the initials.
 */
const initials: (name: string, max = Infinity) => string;

formatInitials()

Formats initials by joining them with a string.

/**
 * @param initials The initials to format.
 * @param join The string to join the initials with.
 */
const formatInitials: (initials: string, join: string) => string;

fontSizeFromInitials()

Get the proper font size for the initials. The font sizes are based on the length of the initials. If the initials are longer than the font sizes, the last font size is used.

/**
 * @param initials The initials to get the font size for.
 * @param fontSizes The font sizes to use.
 */
const fontSizeFromInitials: (initials: string, fontSizes: readonly string[]) => string;

portal

Renders the element in a different part of the DOM. Accepts a css selector or an HTMLElement as the target.

Based on https://github.com/romkor/svelte-portal/tree/master

<div use:portal={'css selector'}></div>

clickOutside

Run a callback when a click outside of the element occurs.

<div
	use:clickOutside={() => {
		console.log('clicked outside!');
	}}
></div>

scrollIntoView

Scroll an element into view on mount and on update. The scroll behavior is will be overriden to instant if the user has reduced motion, otherwhise it will be smooth by default.

It accepts the same options as the native scrollIntoView function extended with canScroll, which determines if the element can be scrolled to or not.

 <div use:scrollIntoView={{
	canScroll: $someCondition,
	block: 'nearest',
	// ... other ScrollIntoViewOptions
 }}>

autofocus

Focus an element on mount and on update.

It accepts the same options as the native focus function extended with canFocus, which determines if the element can be scrolled to or not.

 <div use:autofocus={{
	canFocus: $someCondition,
	preventScroll: true;
 }}>

autofocusAfterTick

Focus an element on mount and on update after tick() resolves.

Options are the same as autofocus.

autofocusWithDelay

Focus an element on mount or on update after a delay.

[!NOTE] Please note that adding a delay will change the focus behavior on mobile: we get the visual indicator that the element is focused, but the keyboard will not open automatically.

Options are the same as autofocus extended with delay.

 <div use:autofocusWithDelay={{
	canFocus: $someCondition,
	delay: 100;
 }}>

scrollToAnchor

Smoothly scroll to the anchor link's target (except if user has reduced motion).

The node has to be an HTMLAnchorElement.

<a href="#section" use:scrollToAnchor>Section</a>