mobx-react-utils

> Utilities often needed for react-mobx development


Install

``bash
npm i -S mobx-react-utils
`

Usage

$3

Decorate a function which return a disposer function, and automatically excute it when react component unmount

Type: method decorator

Context: React component class

Target: () => Disposer

`typescript

public componentDidMount(): void {
// listen the change of query and do action
this.loadStatsReaction();
}

@autoDispose
public loadStatsReaction(): () => void {
return reaction(() => this.query, () => {
this.model.loadStats(this.query);
}, {
fireImmediately: true,
});
}
`

$3

Generate an infinite iterator from an input array

Type: Iterator factory

Context: any

Target: T[]

Produce: Iterable Iterator

`typescript
const pages = [0 , 1 , 2];

const choicePack: IterableIterator = packGen(pages);
`

$3

Sets of comparer for using with Array.sort function

Member:
`typescript
// Sorters
aZComparer
zAComparer
INComparer
NIComparer

// Preset pack (generate with packgen)
numberPack
stringPack
`

`typescript
export declare type Comparer = (a: T, b: T) => number;
export declare function aZComparer(a: string, b: string): number;
export declare function zAComparer(a: string, b: string): number;
export declare function INComparer(a: number, b: number): number;
export declare function NIComparer(a: number, b: number): number;
export declare const stringPack: IterableIterator;
export declare const numberPack: IterableIterator;

`

`typescript
const pack1 = numberPack();
pack1.next().value === null // true
pack1.next().value === INComparer // true
`

$3

Shallow copy property from one object to another with simple typing

Type: function

Context: any

Target: object

Produce: mutation

`typescript
const x: A;
const y: A;
copyFields(x, y);

`

$3

Group array of object by one property value into another result object

Type: function

Context: any

Target: T[]

Produce: object

`typescript
export interface IGroupByResult {
[key: string]: T[];
}
export declare function groupBy(arrayInput: T[], key: keyof T): IGroupByResult;

`

$3

Merge two css modules styles object into one by concatenate each field

`typescript
export interface IStyles {
[key: string]: string;
}
export declare function mergeClassName(target: T, source?: Readonly>): T;
`

$3