@growthops/ext-ts NPM

GrowthOps Ext TypeScript

Utility Functions

`trim: (input: string) => string`

Will trim the leading and trailing whitespace from the supplied string.

`join: (glue: string) => (input: string[]) => string`

Used to build a function that will join the supplied array of strings together using the glue string. Functionaly identical to Array.prototype.join().

`replace: (pattern: string | RegExp, replacement: string) => (input: string) => string`

Used to build a function that will replace the supplied pattern with the replacement string. Functionally identical to String.prototype.replace().

`repeat: (fn: () => void, times: number) => void`

Calls the supplied function the specified number of times. The function (fn) should take no arguments, and return nothing.

Example

import {repeat} from '@growthops/ext-ts';

repeat(() => {
	console.log('Hello!');
}, 5); // Will print "Hello!" to the console 5 times.

`isEmpty: <T extends string | any[] | Record<string, unknown>>(input: T) => boolean`

Determines whether the suppied string, array, or record is empty, eg. '', [], or {} respectively.

`notEmpty: <T extends string | any[] | Record<string, unknown>>(input: T) => boolean`

Complement of isEmpty.

`1. notEquals: (a: any, b: any) => boolean`

`2. notEquals: (a: any) => (b: any) => boolean`

Determines whether the two supplied objects are not equal. Doesn't handle cyclical data structures.

`notNil: (input: any) => boolean`

Determines whether the supplied input is not null or undefined.

`attempt: <T, K extends any[], O>(fn: (input: T, ...rest: K) => O, input: T | undefined | null, ...rest: K) => O | null`

Execute the function fn if input is not nil. input will be passed to fn as its first argument, with any remaining arguments passed to attempt following.

`keyEquals: (key: string, value: string, input: any) => boolean`

Determines whether the input is a record type and it has a key with the supplied value.

`isPopulated: <T extends string | any[] | Record<string, unknown>>(input: T) => boolean`

Determines whether the supplied input has been populated (not null, undefined, '', [], or {}).

`notPopulated: <T extends string | any[] | Record<string, unknown>>(input: T) => boolean`

Complement of isPopulated.

`generateTestImage: (width: number, aspectRatio: number, picsumId?: number) => string`

Generates a Picsum image URL based on the provided width and aspect ratio. Optionally supports specific Picsum image ID's.

`generateDatoTestImage: (width: number, aspectRatio: number, picsumId?: number) => ResponsiveImageType`

Generates a test image record compatible with the DatoCMS ResponsiveImageType.

`collapse: (input: string | string[]) => string`

Takes a string or an array of strings consisting of newlines, tabs, and/or multiple spaces and returns a single collapsed string with only one space between each "word".

Example 1

import {collapse} from '@growthops/ext-ts';

collapse(`
	foo
		bar

	     baz
`);

// Returns: 'foo bar baz'

Example 2

import {collapse} from '@growthops/ext-ts';

collapse([
	'foo',
	`
		bar
		baz
	`,
]);

// Returns: 'foo bar baz'

`useOnScreen: <T extends Element>(options?: IntersectionObserverInit) => {ref, isVisible, isDirty}`

Creates an IntersectionObserver attached to the associated ref toggling isVisible when the object comes into view. The isDirty will be set to true once the object becomes visible and then remain true thereafter — useful for once-off events (scroll into view animations for instance).

Example

import {useOnScreen} from '@growthops/ext-ts';

const Example = () => {
	const {ref, isVisible} = useOnScreen<HTMLDivElement>({threshold: 0.5});

	return (
		<div ref={ref} className={isVisible ? 'bg-red-500' : 'bg-white'}>
			I turn red when 50% or more of me is visible in the viewport.
		</div>
	);
};

`evolve: <T>(partial: NaturalSelection<T>) => (data: T) => T`

Creates a function that will evolve the supplied data using the partial record. The partial record will be merged with the data, and the result will be returned. The partial record can be comprised of concrete values, or of functions that will be called with the current respective key's value and the result of the function will be used as the new value.

Example

import {useState, useCallback} from 'react';
import {evolve} from '@growthops/ext-ts';

type State = {
	clicked: boolean;
	count: number;
}

const Clicker = () => {
	const [state, setState] = useState<State>({count: 0});

	const handleClick = useCallback(() => {
		setState(evolve<State>({
			clicked: true,
			count: x => x + 1
		}));
	});

	return (
		<div>
			<button onClick={handleClick}>Click me!</button>
			<div>{state.count}</div>
		</div>
	);
};

Aspect Ratios

`aspectRatioFractions: Record<AspectRatio, number>`

A lookup table of common aspect ratios in their fractional form (eg. 1.5 for Film).

`aspectRatioNotations: Record<AspectRatio, string>`

A lookup table of common aspect ratios in their notational string form (eg. '3:2' for Film).

Result

`isSuccess: <T>(result: Result<T>) => result is Success<T>`

Guard function for narrowing a Result<T> to a Success<T>.

`isFailure: <T>(result: Result<T>) => result is Failure`

Guard function for narrowing a Result<T> to a Failure.

`success: <T>(data: T) => Success<T>`

Utility function for quickly creating a Success<T>.

`failure: (message: string, data: unknown = null) => Failure`

Utility function for quickly creating a Failure.

`resultFromPromise: async <T, J>(promise: Promise<T>, formatter: (data: T) => J, errorHandler = (data: unknown) => ({message: 'Unknown error occured', data})) => Promise<Result<J>>`

Utility function for converting a Promise<T> into a Promise<Result<J>>. The formatter function supplied is responsible for converting the type returned by the successful promise into the success type encapsulated by the result. The optional errorHandler is responsible for converting the type returned by the failed promise into the failure type encapsulated by the result.