{"id":15914711,"url":"https://github.com/nosir/cleave-zen","last_synced_at":"2025-04-04T16:11:02.641Z","repository":{"id":206927174,"uuid":"717986351","full_name":"nosir/cleave-zen","owner":"nosir","description":"A simple library to help you format input text content","archived":false,"fork":false,"pushed_at":"2024-02-01T10:37:13.000Z","size":305,"stargazers_count":226,"open_issues_count":14,"forks_count":13,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-27T11:04:00.111Z","etag":null,"topics":["credit-card","creditcard","formatting","input"],"latest_commit_sha":null,"homepage":"https://nosir.github.io/cleave-zen","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/nosir.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-13T05:48:45.000Z","updated_at":"2025-03-26T22:44:12.000Z","dependencies_parsed_at":"2023-11-25T04:24:46.359Z","dependency_job_id":"6148b77e-31bf-41c6-b7bc-9314da2487fb","html_url":"https://github.com/nosir/cleave-zen","commit_stats":{"total_commits":27,"total_committers":1,"mean_commits":27.0,"dds":0.0,"last_synced_commit":"22b1d89ca47c4c733e22218ec1a545c80bf43b57"},"previous_names":["nosir/cleave-zen"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosir%2Fcleave-zen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosir%2Fcleave-zen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosir%2Fcleave-zen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nosir%2Fcleave-zen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nosir","download_url":"https://codeload.github.com/nosir/cleave-zen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208142,"owners_count":20901570,"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":["credit-card","creditcard","formatting","input"],"created_at":"2024-10-06T17:05:38.629Z","updated_at":"2025-04-04T16:11:02.604Z","avatar_url":"https://github.com/nosir.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# `cleave-zen`\n\n[![npm version](https://badge.fury.io/js/cleave-zen.svg)](https://badge.fury.io/js/cleave-zen)\n[![npm downloads](https://img.shields.io/npm/dm/cleave-zen.svg)](https://www.npmjs.com/package/cleave-zen)\n[![Documents](https://img.shields.io/badge/documents-check-3362c2.svg)](https://github.com/nosir/cleave-zen/blob/main/docs/modules.md)\n\nA simple library to help you format input text content\n\nUnlike its predecessor [cleave.js](https://github.com/nosir/cleave.js),\n`cleave-zen` no longer binds to DOM input elements. It now functions as a\nversatile formatting library, suitable for use in Node.js, browsers, and easier\nintegration with frameworks like React, Angular, and any other libraries.\n\n## Features\n\n- Credit card formatting\n- Numeral formatting\n- Date / Time formatting\n- Custom delimiter, prefix and blocks pattern\n- Non-intrusive: only providing the formatting methods\n\n**TL;DR** [Demo](https://nosir.github.io/cleave-zen) |\n[Usage Examples](https://github.com/nosir/cleave-zen-examples)\n\n## Install\n\n```sh\nnpm install --save cleave-zen\n```\n\nYou can use it on [unpkg.com](https://unpkg.com/cleave-zen) as a CDN version\n\n## Usage\n\n### Basic\n\nYou have two text fields to display credit card number and type\n\n```html\n\u003cinput class=\"creditcard-input\" type=\"text\" /\u003e\n\u003cinput class=\"creditcard-type\" type=\"text\" /\u003e\n```\n\nNow in your JavaScript\n\n```js\nimport { formatCreditCard, getCreditCardType } from 'cleave-zen'\n\nconst creditcardInput = document.querySelector('.creditcard-input')\nconst creditCardType = document.querySelector('.creditcard-type')\n\ncreditcardInput.addEventListener('input', e =\u003e {\n  const value = e.target.value\n  creditcardInput.value = formatCreditCard(value)\n  creditCardType.innerHTML = getCreditCardType(value)\n})\n```\n\n### ReactJS (hook)\n\n```js\nimport React, { useRef, useState } from 'react'\nimport { formatCreditCard, getCreditCardType } from 'cleave-zen'\n\nconst App = () =\u003e {\n  const inputRef = useRef(null)\n  const [value, setValue] = useState('')\n  const [type, setType] = useState('')\n\n  return (\n    \u003c\u003e\n      \u003cinput\n        ref={inputRef}\n        value={value}\n        onChange={e =\u003e {\n          const value = e.target.value\n          setValue(formatCreditCard(value))\n          setType(getCreditCardType(value))\n        }}\n      /\u003e\n      \u003cdiv\u003evalue: {value}\u003c/div\u003e\n      \u003cdiv\u003etype: {type}\u003c/div\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n### TypeScript\n\nThis lib is written by TypeScript, so if you prefer to use it that way:\n\n```js\nimport { formatCreditCard, type FormatCreditCardOptions } from 'cleave-zen'\n\nconst options: FormatCreditCardOptions = { delimiter: '-' }\nconst value: string = formatCreditCard('5163000011112222', options)\n```\n\n### Track cursor (optional)\n\nWhen you manually updating the input field with formatted value, the cursor\nmoves to the end of the field, which can be super annoying when you typing or\ndeleting letters inside the string content.\n\nThis library can fix this issue for you! Simply add `registerCursorTracker` for\nthe input field:\n\n```js\nimport { registerCursorTracker, DefaultCreditCardDelimiter } from 'cleave-zen'\n\nregisterCursorTracker({ input: creditCardInput, delimiter: DefaultCreditCardDelimiter }})\n```\n\nAnd for ReactJS usage above:\n\n```js\nimport { useRef, useEffect } from 'react'\n\n...\n\nconst inputRef = useRef(null)\nuseEffect(() =\u003e {\n    // registerCursorTracker itself returns an unregister destructor\n    // function so you can place it here for hook component unmount\n    return registerCursorTracker({ input: inputRef.current, delimiter: DefaultCreditCardDelimiter })\n}, [])\n\n...\n```\n\n### All other examples\n\nSee all examples in this [repo](https://github.com/nosir/cleave-zen-examples)\n\n## Documentation\n\n- [API](https://github.com/nosir/cleave-zen/blob/main/docs/modules.md)\n\n## TODO List\n\n- [x] Create an example repo for individual lib usage case\n- [ ] Create demo page for different type of formatting\n- [ ] Review still related PRs and issues in the old cleave.js repo and\n      implement it here\n- [ ] Add unit tests\n- [ ] Add docs comments for functions and usages\n- [ ] Add more library integration usages in\n      [example repo](https://github.com/nosir/cleave-zen-examples)\n- [ ] Create legacy cleave.js phone formatter in a separate repo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnosir%2Fcleave-zen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnosir%2Fcleave-zen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnosir%2Fcleave-zen/lists"}