{"id":24329566,"url":"https://github.com/lullaby6/input-transform","last_synced_at":"2026-02-21T16:03:04.237Z","repository":{"id":271492371,"uuid":"913633086","full_name":"lullaby6/input-transform","owner":"lullaby6","description":"NPM Package - Transform and format input values","archived":false,"fork":false,"pushed_at":"2025-04-03T15:59:52.000Z","size":26,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T21:46:47.498Z","etag":null,"topics":["html","html-input","input","js","js-lib","js-library","npm","npm-package"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/input-transform","language":"JavaScript","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/lullaby6.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,"zenodo":null}},"created_at":"2025-01-08T04:10:22.000Z","updated_at":"2025-04-03T15:59:55.000Z","dependencies_parsed_at":"2025-01-08T16:37:07.194Z","dependency_job_id":"336072a5-a1d7-4214-9b72-a1562b527be3","html_url":"https://github.com/lullaby6/input-transform","commit_stats":null,"previous_names":["lullaby6/input-format","lullaby6/input-transform"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lullaby6/input-transform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lullaby6%2Finput-transform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lullaby6%2Finput-transform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lullaby6%2Finput-transform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lullaby6%2Finput-transform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lullaby6","download_url":"https://codeload.github.com/lullaby6/input-transform/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lullaby6%2Finput-transform/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29685049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T15:51:39.154Z","status":"ssl_error","status_checked_at":"2026-02-21T15:49:03.425Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["html","html-input","input","js","js-lib","js-library","npm","npm-package"],"created_at":"2025-01-18T00:16:24.586Z","updated_at":"2026-02-21T16:03:04.221Z","avatar_url":"https://github.com/lullaby6.png","language":"JavaScript","readme":"# Input Transform\n\nInputTransform is a lightweight JavaScript library that provides various input transformations, such as formatting text, validating file uploads, and converting images to Base64 or WebP format.\n\n## Installation\n\n### NPM\n\nInstall the library using NPM:\n\n```bash\nnpm i input-transform\n```\n\n### Import\n\n```js\n// CommonJS\nconst InputTransform = require('input-transform');\n\n// ES Modules\nimport InputTransform from 'input-transform';\n```\n\n### CDN\n\n```html\n\u003cscript src='https://cdn.jsdelivr.net/gh/lullaby6/input-transform/input-transform.min.umd.js'\u003e\u003c/script\u003e\n```\n\nYou can aslo import the Module format:\n\n```html\n\u003cscript type=\"module\"\u003e\n    import InputFormat from \"https://cdn.jsdelivr.net/gh/lullaby6/input-transform/input-transform.min.mjs.js\";\n\u003c/script\u003e\n```\n\n### Download\n\n\u003ca href=\"https://cdn.jsdelivr.net/gh/lullaby6/input-transform/input-transform.min.umd.js\" target=\"_blank\"\u003eDownload\u003c/a\u003e and include the downloaded file in your project:\n\n```html\n\u003cscript src=\"/path/to/input-transform.min.umd.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```js\n// Simple example\nInputTransform.init('input#username', {\n    capitalize: true,\n    trim: true,\n    maxLength: 20,\n})\n\n// Change option\ndocument.getElementById('username').InputTransformOptions.maxLength = 25;\n\n// Initialize image transformations\nInputTransform.init('input#image-upload', {\n    fileType: 'jpg,png,webp',\n    maxImageSize: 500000, // 500 KB\n    imageBase64: true // transform the input image to a image in base64 encoded string\n});\n```\n\n### Using `initOne` and `initAll`\n\nInstead of manually defining transformations in JavaScript, you can use HTML data attributes. The `initOne` method applies transformations based on an element's attributes, while `initAll` applies them to all inputs on the page.\n\n#### Example:\n\n```html\n\u003cinput type=\"text\" id=\"username\" data-input-transform-max-length=\"25\" data-input-transform-trim=\"true\"\u003e\n```\n\n```js\nInputTransform.initOne('#username');\n```\nThis will automatically trim spaces and limit the input to 25 characters.\n\nAlternatively, to initialize all matching inputs on the page:\n\n```js\nInputTransform.initAll();\n```\nThis will apply transformations to all elements that have `data-input-transform-*` attributes.\n\n## API\n\n| Method         | Description | Parameters |\n|---------------|-------------|------------|\n| `regex` | Applies a regex replacement to the input value. | `regex` (RegExp), `replace` (string, optional) |\n| `regexs` | Applies multiple regex replacements. | `regexs` (array of `{ regex, replace }`) |\n| `minNumber` | Ensures the number is at least a minimum value. | `minNumber` (number) |\n| `maxNumber` | Ensures the number is at most a maximum value. | `maxNumber` (number) |\n| `uppercase` | Converts the input to uppercase. | None |\n| `lowercase` | Converts the input to lowercase. | None |\n| `capitalize` | Capitalizes the first letter of the input. | None |\n| `trim` | Removes leading and trailing spaces. | None |\n| `clearSpaces` | Removes all spaces from the input. | None |\n| `clearNumbers` | Removes all numbers from the input. | None |\n| `onlyNumbers` | Removes all non-numeric characters. | None |\n| `clearSymbols` | Removes all symbols except letters and numbers. | None |\n| `onlySymbols` | Removes all letters and numbers, keeping only symbols. | None |\n| `clearLetters` | Removes all letters from the input. | None |\n| `onlyLetters` | Removes all non-letter characters. | None |\n| `maxLength` | Limits the input to a maximum number of characters. | `maxLength` (number) |\n| `clear` | Removes a specific substring. | `clear` (string) |\n| `clears` | Removes multiple substrings. | `clears` (comma-separated string) |\n| `fileType` | Validates allowed file extensions. | `fileType` (comma-separated string) |\n| `maxImageSize` | Restricts file size for uploaded images. | `maxImageSize` (bytes) |\n| `imageBase64` | Converts uploaded images to Base64. | None |\n| `imageBase64Webp` | Converts uploaded images to WebP format. | None |\n\n## Initialization Methods\n\n| Method       | Description | Parameters |\n|-------------|-------------|------------|\n| `init` | Initializes an input field with specified transformation methods. | `input` (string or Element), `options` (object) |\n| `initOne` | Automatically initializes a single input using data attributes. | `input` (string or Element) |\n| `initAll` | Automatically initializes all inputs on the page that have transformation data attributes. | None |\n\n## Events\n\nInputTransform emits custom events that you can listen to:\n\n| Event Name | Description |\n|-----------|-------------|\n| `input-transform.init` | Triggered when an input transformation is initialized. |\n| `input-transform.error` | Triggered when an error occurs (e.g., invalid file type or size). |\n| `input-transform.change` | Triggered when the input value is transformed. |\n\n### Example:\n\n```js\ndocument.getElementById('username').addEventListener('input-transform.change', event =\u003e {\n    console.log('Transformed value:', event.detail.value);\n});\n\nwindow.addEventListener('input-transform.error', event =\u003e {\n    console.error('Error:', event.detail.message);\n})\n```\n\n## License\n\nMIT\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flullaby6%2Finput-transform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flullaby6%2Finput-transform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flullaby6%2Finput-transform/lists"}