Create string mask
npm install 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.
``shnpm
npm install 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.
Tests
`sh
npm
npm install
npm run testyarn
yarn install
yarn test
``