React Hook Result

There are two common ways to implement a hook that returns a result:

1. Returning an array and accessing with [a, b, ...] = useHook()
2. Returning an object and accessing with {a, b, ...} = useHook()

Under these circumstances, the two are mutually exclusive. This library provides a class that allows accessing hook values in both ways with one object. Simply return an instance of HookResult in your hook.

Unfortunately, the library cannot be used to infer types in TypeScript. Therefore, I recommend using a union type to define individual properties. You then need to also union with a tuple type if you want certain types of destructured values via array access. When you do this, DO NOT attempt to access any array properties directly, as they will not actually exist on the object. Here's a sample of how to do that correclty:

type TestHookResult = HookResult<{a: number, b: string}, number | string> & {a: number, b: string} & (readonly [number, string]);

function useTestHook(): TestHookResult {
    return new HookResult({a: 1, b: 'test'}, ['a', 'b']) as TestHookResult;
}

As a shortcut, you can also do this:

type TestHookResult = HookResultData<{a: number, b: string}, readonly [number, string]>;

function useTestHook(): TestHookResult {
    return new HookResult({a: 1, b: 'test'}, ['a', 'b']) as TestHookResult;
}

I'm aware that this is a hack, but it's the best I can do with the current limitations of TypeScript.

The class is exported as default, so you can import in one of the following ways:

// ES6
import HookResult from '@ptolemy2002/react-hook-result';
// CommonJS
const HookResult = require('@ptolemy2002/react-hook-result');

Type Reference

type HookResultKey = string | number | symbol;
type HookResuultData<T extends Record<HookResultKey, any>, A extends readonly any[]> = HookResult<T, ValueOf<T>> & T & A;

Classes

The following classes are available in the library:

HookResult<T extends Record<HookResultKey, V=any>

Description

A class that allows accessing hook values in both array and object forms. This is useful for hooks that return multiple values, as it allows the user to access the values in the way that is most convenient for them. Accessing a property of the object directly will first look for an existing property with that name, and if it does not exist, it will get the value from the _data object.

Parameters

• data (T): The data to be returned by the hook. This should be an object with the keys being the names of the values and the values being the values themselves.
• order ((keyof T)[]): The order in which each key should be accessed to be iterated over. Any key not present in this array will be placed at the end in the order that they appear when iterating over the object, which may not be consistent across browsers. By default, this is an empty array.

Instance Properties

• _data (Map<HookResultKey, V>): The object that holds this instance's data. It is of type Map so that we can save the order of the keys consistently. You should never need to directly access this property, but you can.

Instance Methods

• [Symbol.iterator](): MapIterator<V>: Allows the instance to be iterated over with a for...of loop or destructuring. The order of the keys will be the order in which they were passed to the constructor, followed by any keys that were not passed in the order that they appear when iterating over the object.

Peer Dependencies

These should be installed in order to use the library, as npm does not automatically add peer dependencies to your project.

• @ptolemy2002/js-utils^3.0.2
• @ptolemy2002/ts-utils^2.0.0

Commands

The following commands exist in the project:

• npm run uninstall - Uninstalls all dependencies for the library
• npm run reinstall - Uninstalls and then Reinstalls all dependencies for the library
• npm run example-uninstall - Uninstalls all dependencies for the example app
• npm run example-install - Installs all dependencies for the example app
• npm run example-reinstall - Uninstalls and then Reinstalls all dependencies for the example app
• npm run example-start - Starts the example app after building the library
• npm run build - Builds the library
• npm run release - Publishes the library to npm without changing the version
• npm run release-patch - Publishes the library to npm with a patch version bump
• npm run release-minor - Publishes the library to npm with a minor version bump
• npm run release-major - Publishes the library to npm with a major version bump