{"id":26664456,"url":"https://github.com/evgenyifedotov/string-mask-jedi","last_synced_at":"2025-04-11T20:33:16.360Z","repository":{"id":33616171,"uuid":"159877752","full_name":"EvgenyiFedotov/string-mask-jedi","owner":"EvgenyiFedotov","description":"🛠 This package allows you to create dynamic masks for the input field with the ability to control the cursor position.","archived":false,"fork":false,"pushed_at":"2023-01-27T04:34:59.000Z","size":3001,"stargazers_count":10,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T20:20:45.781Z","etag":null,"topics":["create-mask","hook","mask","react","react-hook","string-mask"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EvgenyiFedotov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-30T20:56:42.000Z","updated_at":"2024-01-17T16:12:35.000Z","dependencies_parsed_at":"2023-02-15T05:31:20.197Z","dependency_job_id":null,"html_url":"https://github.com/EvgenyiFedotov/string-mask-jedi","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvgenyiFedotov%2Fstring-mask-jedi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvgenyiFedotov%2Fstring-mask-jedi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvgenyiFedotov%2Fstring-mask-jedi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvgenyiFedotov%2Fstring-mask-jedi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EvgenyiFedotov","download_url":"https://codeload.github.com/EvgenyiFedotov/string-mask-jedi/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248476752,"owners_count":21110352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["create-mask","hook","mask","react","react-hook","string-mask"],"created_at":"2025-03-25T16:28:21.231Z","updated_at":"2025-04-11T20:33:16.318Z","avatar_url":"https://github.com/EvgenyiFedotov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛠 String-mask-jedi\n\n[![npm](https://img.shields.io/npm/v/string-mask-jedi?style=flat)](https://www.npmjs.com/package/string-mask-jedi)\n[![npm bundle size](https://img.shields.io/bundlephobia/min/string-mask-jedi?color=success\u0026label=minified\u0026style=flat)](https://bundlephobia.com/result?p=string-mask-jedi)\n![license](https://img.shields.io/npm/l/string-mask-jedi?style=flat)\n![David](https://img.shields.io/david/EvgenyiFedotov/string-mask-jedi?style=flat)\n[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://evgenyifedotov.github.io/string-mask-jedi)\n\nThis package allows you to create dynamic masks for the input field with the ability to control the cursor position.\n\n![string-mask-jedi demo](https://raw.githubusercontent.com/EvgenyiFedotov/string-mask-jedi/master/readme/show-mask.gif)\n\n## Install\n\n```sh\n# npm\nnpm install string-mask-jedi\n\n# yarn\nyarn add string-mask-jedi\n```\n\n## Usage\n\n### Create mask\n\n```ts\nimport { createMask } from \"string-mask-jedi\";\n\nconst phoneMask = createMask(\"+0 (ddd) ddd-dd-dd\", { d: /\\d/ });\n\nconsole.log(phoneMask.run(\"9998887766\").value);\n// +0 (999) 888-77-66\n```\n\n_[[createMask]](#createMask)_\n\n### React hook\n\n```tsx\nimport * as React from \"react\";\nimport { createMask } from \"string-mask-jedi\";\nimport { useMask } from \"string-mask-jedi/react\";\n\nconst phoneMask = createMask(\"+0 (ddd) ddd-dd-dd\", { d: /\\d/ });\n\nconst App: React.FC = () =\u003e {\n  const { value, onChange, ref } = useMask(phoneMask);\n\n  return \u003cinput value={value} onChange={onChange} ref={ref} /\u003e;\n};\n```\n\n_[[createMask]](#createMask)_\n_[[useMask]](#useMask)_\n\n### React hook with use effector\n\n```tsx\nimport * as React from \"react\";\nimport { createMask } from \"string-mask-jedi\";\nimport { useMask } from \"string-mask-jedi/react\";\nimport { createEvent, restore } from \"effector\";\nimport { useStore } from \"effector-react\";\n\nconst phoneMask = createMask(\"+0 (ddd) ddd-dd-dd\", { d: /\\d/ });\n\nconst updateValue = createEvent\u003cMaskResult\u003e();\nconst $value = restore(updateValue, { value: \"\", cursor: 0 });\n\nconst App: React.FC = () =\u003e {\n  const rawValue = useStore($value);\n  const { value, onChange, ref } = useMask(phoneMask, () =\u003e [\n    rawValue,\n    updateValue,\n  ]);\n\n  return \u003cinput value={value} onChange={onChange} ref={ref} /\u003e;\n};\n```\n\n_[[createMask]](#createMask)_\n_[[useMask]](#useMask)_\n_[[UseStateHandler]](#UseStateHandler)_\n\n## API\n\n### `createMask`\n\n```ts\n/**\n * @param stringMask - mask format\n * @param translations - object with letters witch need translating\n * @param options - object with added options for mask\n */\ntype CreateMask = (\n  stringMask: string,\n  translations?: Translations,\n  options?: Partial\u003cOmit\u003cConfig, \"tokens\"\u003e\u003e,\n) =\u003e Mask;\n```\n\n_[[Translations]](#translation)_\n_[[Config]](#config)_\n_[[Mask]](#mask)_\n\n### `Token`\n\nObject witch cached value letter when process value after mask running.\n\n```ts\ninterface Token {\n  value: string;\n  additional: boolean;\n}\n```\n\n### `State`\n\nObject current state mask in processing value after mask running.\n\n```ts\ninterface State {\n  remainder: string;\n  tokens: Token[];\n  cursor: number;\n}\n```\n\n_[[Token]](#token)_\n\n### `GetMatch`\n\nMethod fot get `RegExp` for each token.\n\n```ts\ntype GetMatch = (state: State, index: number) =\u003e RegExp;\n```\n\n### `Mask`\n\nRestult `createMask`.\n\n```ts\ninterface Mask {\n  run: MaskRun;\n  config: Config;\n}\n```\n\n_[[MaskRun]](#maskrun)_\n_[[Config]](#config)_\n\n### `MaskResult`\n\nResult run mask.\n\n```ts\ninterface MaskResult {\n  value: string;\n  cursor: number;\n}\n```\n\n### `TokenConfig`\n\nToken config for each letter in created mask.\n\n```ts\ninterface TokenConfig {\n  getMatch: GetMatch;\n  defaultValue: string;\n  additional: boolean;\n}\n```\n\n_[[GetMatch]](#getmatch)_\n\n### `Config`\n\nConfig for create mask.\n\n\u003e Please note. `createMask` automatically created config by `stringMask`, `translations` and `options`.\n\n```ts\ninterface Config {\n  tokens: TokenConfig[];\n  converters: Converter[];\n}\n```\n\n_[[TokenConfig]](#tokenconfig)_\n_[[Converter]](#converter)_\n\n### `Converter`\n\nMethod for converting result after\n\n```ts\ntype Converter = (tokens: Token[], configTokens: TokenConfig[]) =\u003e void;\n```\n\n_[[Token]](#token)_\n_[[TokenConfig]](#tokenconfig)_\n\n---\n\n### `Translation`\n\n```ts\ntype Translation = string | RegExp | GetMatch | TokenConfig | Mask;\n```\n\n_[[GetMatch]](#getmatch)_\n_[[TokenConfig]](#tokenconfig)_\n\n### `Translations`\n\n```ts\ninterface Translations {\n  [key: string]: Translation | Translation[];\n}\n```\n\n_[[Translation]](#translation)_\n\n### `MaskRun`\n\n```ts\ntype MaskRun = (value: string, cursor?: number) =\u003e MaskResult;\n```\n\n_[[MaskResult]](#maskresult)_\n\n## API for React\n\n### `useMask`\n\nReact hook for use mask.\n\n```ts\ntype useMask = \u003cT = HTMLInputElement\u003e(\n  mask: Mask,\n  useState: UseStateHandler = React.useState,\n) =\u003e UseStringMaskResult\u003cT\u003e;\n```\n\n_[[Mask]](#mask)_\n_[[UseStateHandler]](#UseStateHandler)_\n_[[UseStringMaskResult]](#UseStringMaskResult)_\n\n### `UseStateHandler`\n\nСtate management handler\n\n```ts\ntype UseStateHandler = (\n  initialState: MaskResult,\n) =\u003e [MaskResult, (state: MaskResult) =\u003e any];\n```\n\n### `UseStringMaskResult`\n\nResult react hook `useMask`.\n\n```ts\ninterface UseStringMaskResult\u003cT = any\u003e {\n  value: string;\n  onChange: (\n    event: React.ChangeEvent\u003cHTMLInputElement | HTMLTextAreaElement\u003e,\n  ) =\u003e void;\n  ref: React.RefObject\u003cT\u003e;\n}\n```\n\n## Examples\n\nSee storybook with examples code.\n\n- [Date](https://evgenyifedotov.github.io/string-mask-jedi/?path=/story/date--init)\n- [Time](https://evgenyifedotov.github.io/string-mask-jedi/?path=/story/time--init)\n- [Phone](https://evgenyifedotov.github.io/string-mask-jedi/?path=/story/phone--init)\n\n## Tests\n\n```sh\n# npm\nnpm install\nnpm run test\n\n# yarn\nyarn install\nyarn test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevgenyifedotov%2Fstring-mask-jedi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevgenyifedotov%2Fstring-mask-jedi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevgenyifedotov%2Fstring-mask-jedi/lists"}