🛠 String-mask-jedi

!license
!David

This package allows you to create dynamic masks for the input field with the ability to control the cursor position.

!string-mask-jedi demo

Install

``sh


npm

npm install string-mask-jedi

yarn

yarn add string-mask-jedi
`

Usage

$3

`ts
import { createMask } from "string-mask-jedi";

const phoneMask = createMask("+0 (ddd) ddd-dd-dd", { d: /\d/ });

console.log(phoneMask.run("9998887766").value);
// +0 (999) 888-77-66
`

_[[createMask]](#createMask)_

$3

`tsx
import * as React from "react";
import { createMask } from "string-mask-jedi";
import { useMask } from "string-mask-jedi/react";

const phoneMask = createMask("+0 (ddd) ddd-dd-dd", { d: /\d/ });

const App: React.FC = () => {
const { value, onChange, ref } = useMask(phoneMask);

return ;
};
`

_[[createMask]](#createMask)_
_[[useMask]](#useMask)_

$3

`tsx
import * as React from "react";
import { createMask } from "string-mask-jedi";
import { useMask } from "string-mask-jedi/react";
import { createEvent, restore } from "effector";
import { useStore } from "effector-react";

const phoneMask = createMask("+0 (ddd) ddd-dd-dd", { d: /\d/ });

const updateValue = createEvent();
const $value = restore(updateValue, { value: "", cursor: 0 });

const App: React.FC = () => {
const rawValue = useStore($value);
const { value, onChange, ref } = useMask(phoneMask, () => [
rawValue,
updateValue,
]);

return ;
};
`

_[[createMask]](#createMask)_
_[[useMask]](#useMask)_
_[[UseStateHandler]](#UseStateHandler)_

API

$3

`ts
/**
* @param stringMask - mask format
* @param translations - object with letters witch need translating
* @param options - object with added options for mask
*/
type CreateMask = (
stringMask: string,
translations?: Translations,
options?: Partial>,
) => Mask;
`

_[[Translations]](#translation)_
_[[Config]](#config)_
_[[Mask]](#mask)_

$3

Object witch cached value letter when process value after mask running.

`ts
interface Token {
value: string;
additional: boolean;
}
`

$3

Object current state mask in processing value after mask running.

`ts
interface State {
remainder: string;
tokens: Token[];
cursor: number;
}
`

_[[Token]](#token)_

$3

Method fot get RegExp for each token.

`ts
type GetMatch = (state: State, index: number) => RegExp;
`

$3

Restult createMask.

`ts
interface Mask {
run: MaskRun;
config: Config;
}
`

_[[MaskRun]](#maskrun)_
_[[Config]](#config)_

$3

Result run mask.

`ts
interface MaskResult {
value: string;
cursor: number;
}
`

$3

Token config for each letter in created mask.

`ts
interface TokenConfig {
getMatch: GetMatch;
defaultValue: string;
additional: boolean;
}
`

_[[GetMatch]](#getmatch)_

$3

Config for create mask.

> Please note. createMask automatically created config by stringMask, translations and options.

`ts
interface Config {
tokens: TokenConfig[];
converters: Converter[];
}
`

_[[TokenConfig]](#tokenconfig)_
_[[Converter]](#converter)_

$3

Method for converting result after

`ts
type Converter = (tokens: Token[], configTokens: TokenConfig[]) => void;
`

_[[Token]](#token)_
_[[TokenConfig]](#tokenconfig)_

---

$3

`ts
type Translation = string | RegExp | GetMatch | TokenConfig | Mask;
`

_[[GetMatch]](#getmatch)_
_[[TokenConfig]](#tokenconfig)_

$3

`ts
interface Translations {
[key: string]: Translation | Translation[];
}
`

_[[Translation]](#translation)_

$3

`ts
type MaskRun = (value: string, cursor?: number) => MaskResult;
`

_[[MaskResult]](#maskresult)_

API for React

$3

React hook for use mask.

`ts
type useMask = (
mask: Mask,
useState: UseStateHandler = React.useState,
) => UseStringMaskResult;
`

_[[Mask]](#mask)_
_[[UseStateHandler]](#UseStateHandler)_
_[[UseStringMaskResult]](#UseStringMaskResult)_

$3

Сtate management handler

`ts
type UseStateHandler = (
initialState: MaskResult,
) => [MaskResult, (state: MaskResult) => any];
`

$3

Result react hook useMask.

`ts
interface UseStringMaskResult {
value: string;
onChange: (
event: React.ChangeEvent,
) => void;
ref: React.RefObject;
}
`

Examples

See storybook with examples code.

- Date
- Time
- Phone

Tests

`sh


npm

npm install
npm run test

yarn

yarn install
yarn test
``