{"id":22202156,"url":"https://github.com/rumkin/mighty-input","last_synced_at":"2025-07-27T04:31:34.614Z","repository":{"id":57296945,"uuid":"174442395","full_name":"rumkin/mighty-input","owner":"rumkin","description":"Text input for modern web","archived":false,"fork":false,"pushed_at":"2019-03-14T12:26:26.000Z","size":457,"stargazers_count":20,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-20T04:42:40.385Z","etag":null,"topics":["input","react","react-component","text-input","web-ui"],"latest_commit_sha":null,"homepage":"https://mighty-input.vercel.app/","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/rumkin.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":"2019-03-08T00:40:05.000Z","updated_at":"2022-04-19T12:06:28.000Z","dependencies_parsed_at":"2022-09-01T13:01:55.392Z","dependency_job_id":null,"html_url":"https://github.com/rumkin/mighty-input","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumkin%2Fmighty-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumkin%2Fmighty-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumkin%2Fmighty-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumkin%2Fmighty-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rumkin","download_url":"https://codeload.github.com/rumkin/mighty-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227759979,"owners_count":17815626,"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":["input","react","react-component","text-input","web-ui"],"created_at":"2024-12-02T16:12:34.950Z","updated_at":"2024-12-02T16:12:35.680Z","avatar_url":"https://github.com/rumkin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mighty Input\n\nTiny React text input component for the modern web. Use HTML to decorate\n`\u003cinput /\u003e` value for your goals.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"720\" alt=\"Mighty input example GIF\" src=\"https://raw.githubusercontent.com/rumkin/mighty-input/HEAD/docs/mighty-input.gif\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  👇 Source of the preview 👆\n\u003c/p\u003e\n\n```javascript\nfunction AnimatedInput({ value, ...props }) {\n  const render = nextValue =\u003e Array.from(nextValue)\n  .map((char, i) =\u003e (\n    \u003cspan key={i} className={`animation-${getCharType(char)}`}\u003e\n      {char}\n    \u003c/span\u003e\n  ));\n\n  return (\n    \u003cMightyInput value={value} render={render} {...props}/\u003e\n  );\n}\n\nfunction getCharType(char, index) {\n  switch (char) {\n    case \"😀\": // Smiley face emoji\n      return \"smiley\";\n    case \"💗\": // Heart emoji\n      return \"heart\";\n    default:\n      return \"char\";\n  }\n}\n```\n\nCSS could be found in [examples](examples) folder.\n\n## Installation\n\n```shell\nnpm i mighty-input\n```\n\n## Live examples\n\n* [Message Input](https://mighty-input.now.sh/#message-input)\n* [Highlight errors](https://mighty-input.now.sh/#highlight-errors)\n* [Phone number input](https://mighty-input.now.sh/#phone-number)\n* [Number groups](https://mighty-input.now.sh/#number-groups)\n* [Fixed input value](https://mighty-input.now.sh/#fixed-input-value)\n\n## Usage\n\nUse `render` property to specify custom render method and receive changed via `onUpdate` property callback.\n```js\n\u003cMightyInput\n  render={(value) =\u003e (\n    \u003cspan style={{borderBottom: '2px solid green'}}\u003e\n      {value}\n    \u003c/span\u003e\n  )}}\n  onUpdate={(value) =\u003e {\n    // Value changed\n  }}\n/\u003e\n```\n\n### Filter value\n\nUse `filter` prop to specify input filter function.\n\nFiltrate any non-digit values:\n```js\n\u003cMightyInput\n  filter={(next, prev) =\u003e {\n    if (/^\\d$/.test(next)) {\n      return next;\n    }\n    else {\n      return prev;\n    }\n  }}\n/\u003e\n```\n\n## API\n\n### `render()`\n```\n(next:string, previous:string) -\u003e string|React.Element\n```\n\nRender property is a function to transform value to HTML or another string. This function receives `next` and `previous` values of input field.\n\n```javascript\n\u003cMightyInput render={\n  (next) =\u003e \u003cspan style={{color: 'red'}}\u003e{next}\u003c/span\u003e\n} /\u003e\n```\n\n### `filter()`\n```\n(next:string, previous:string) -\u003e string\n```\n\nFilter property is a function to filtrate input and return new output value. This function receives `next` and `previous` values of input field.\n\n```javascript\n\u003cMightyInput filter={\n  (next, prev) =\u003e next.length \u003c 10 ? next : prev\n} /\u003e\n```\n\n### `onUpdate()`\n```\n(next:string, previous:string) -\u003e void\n```\nUpdate event handler. It emits each time value (passed through `filter`) changes.\n\n### `modifiers{}`\n```\n{\n  focus:string = '--focus',\n}\n```\n\nModifers property is an object with CSS classes for different states. It's using to simulate native CSS behavior for input wrapper. Currently it only has one option: `focus`.\n\n### References\n\nMightyInput is inspired by [Colin Kuebler](https://github.com/kueblc)'s [LDT](https://github.com/kueblc/LDT).\n\n## License\n\nMIT © [Rumkin](https://rumk.in)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frumkin%2Fmighty-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frumkin%2Fmighty-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frumkin%2Fmighty-input/lists"}