{"id":13714892,"url":"https://github.com/ajimix/Input-Framer","last_synced_at":"2025-05-07T03:30:59.021Z","repository":{"id":30562707,"uuid":"34117595","full_name":"ajimix/Input-Framer","owner":"ajimix","description":"Framer module to add inputs to your prototypes and easily turn your designs inputs into real inputs","archived":false,"fork":false,"pushed_at":"2019-01-01T08:59:45.000Z","size":354,"stargazers_count":338,"open_issues_count":0,"forks_count":33,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-07T12:06:05.908Z","etag":null,"topics":["coffeescript","framer","framer-studio","input","prototype"],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","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/ajimix.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":"2015-04-17T13:17:48.000Z","updated_at":"2024-08-05T23:54:53.000Z","dependencies_parsed_at":"2022-08-17T19:10:31.348Z","dependency_job_id":null,"html_url":"https://github.com/ajimix/Input-Framer","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajimix%2FInput-Framer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajimix%2FInput-Framer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajimix%2FInput-Framer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajimix%2FInput-Framer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajimix","download_url":"https://codeload.github.com/ajimix/Input-Framer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806411,"owners_count":21807199,"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":["coffeescript","framer","framer-studio","input","prototype"],"created_at":"2024-08-03T00:00:51.569Z","updated_at":"2025-05-07T03:30:58.473Z","avatar_url":"https://github.com/ajimix.png","language":"CoffeeScript","readme":"# Input-Framer\n\nFramer module to easily turn your designs inputs into real inputs.\n\n![Input Demo](img/input.gif)\n\n## Add it in your Framer Studio project\n\n### Install it with Framer Modules\n\n\u003ca href='https://open.framermodules.com/input-framer'\u003e\n  \u003cimg alt='Install with Framer Modules' src='https://www.framermodules.com/assets/badge@2x.png' width='160' height='40' /\u003e\n\u003c/a\u003e\n\n### Or install it manually\n\n- Download the project from github.\n- Copy `input.coffee` and `keyboard.png` into `modules/` folder.\n- Import it in Framer Studio by writing: `InputModule = require \"input\"`.\n\n**Note:** `keyboard.png` is prepared for iPhone 7. If you want to use a different size, replace with your own image.\n\n## How to use it\n\nExport your assets as you would do normally, then create an input object and place it over your designed input. Done!\nRemember that all parameters are optional.\n\n\n```coffeescript\n# Basic usage\nInputModule = require \"input\"\n\ninput = new InputModule.Input\n  setup: true # Change to true when positioning the input so you can see it\n  y: 240 # y position\n  x: 90  # x position\n  width: 500\n  height: 60\n```\n\n```coffeescript\n# All options\nInputModule = require \"input\"\n\ninput = new InputModule.Input\n  setup: false # Change to true when positioning the input so you can see it\n  virtualKeyboard: true # Enable or disable virtual keyboard for when viewing on computer\n  placeholder: \"Username\" # Text visible before the user type\n  placeholderColor: \"#fff\" # Color of the placeholder text\n  text: \"Some text\" # Initial text in the input\n  textColor: \"#000\" # Color of the input text\n  type: \"text\" # Use any of the available HTML input types. Take into account that on the computer the same keyboard image will appear regarding the type used.\n  backgroundColor: \"transparent\" # e.g. \"#ffffff\" or \"blue\"\n  fontSize: 30 # Size in px\n  fontFamily: \"-apple-system\" # Font family for placeholder and input text\n  fontWeight: \"500\" # Font weight for placeholder and input text\n  lineHeight: 1 # Line height in em\n  tabIndex: 5 # Tab index for the input (default is 0)\n  padding: 10 # Padding in px, multiple values are also supported via string, e.g. \"10 5 16 2\"\n  autofocus: false # Change to true to enable autofocus\n  goButton: false # Set true here in order to use \"Go\" instead of \"Return\" as button (only works on real devices)\n  submit: false # Change to true if you want to enable form submission\n  textarea: true # Use textarea instead of input\n  letterSpacing: 0 # Letter spacing\n  disabled: true # disable input (inactive)\n  \n  y: 240 # y position\n  x: 90  # x position\n  width: 500\n  height: 60\n```\n\n\n#### Styling your input\nYou can style many properties directly on creation or from here\n\n```coffeescript\ninput.style =\n  fontSize: \"30px\"\n  lineHeight: \"30px\"\n  padding: \"10px\"\n  color: \"white\"\n  ...\n```\n\n#### Retrieving value of your input\n\nYou can access directly to `.value` property to get the value. For example to get the value on each key up you could do something like this...\n\n```coffeescript\ninput.on \"keyup\", -\u003e\n  print @value\n```\n\n#### Focusing and Unfocusing the input via code\n\nImagine that you want to `focus` the input once you click \"myButton\", here is an example:\n\n```coffeescript\nmyButton.on Events.Click, -\u003e\n  input.focus()\n```  \n\nImagine that you want to `unfocus` the input once you press enter, here is an example:\n\n```coffeescript\ninput.on 'keyup', (e) -\u003e\n  if e.keyCode == 13\n    input.unfocus()\n```\n\n#### Focus and Blur(Unfocus) events\n\nYou can add your own custom actions using the `onFocus` and `onBlur` helpers.\n\n```coffeescript\ninput.onFocus -\u003e\n  print \"Input is focused and has the value: #{@value}\"\n\ninput.onBlur -\u003e\n  print \"Input lost focus\"\n```\n\n#### Disable and Enable Input\n\n```coffeescript\ninput.disable() // disable input (inactive)\ninput.enable() // enable input (active)\n```\n\n\n### [Advanced] Accessing original elements\n\nThe input layer is constructed of a form and an input field. You can always access those elements by accessing directly to the properties `input` and `form`.\n\nExample:\n\n```coffeescript\nEvents.wrap(someNiceInput.form).addEventListener \"submit\", -\u003e\n\tprint \"The form was submitted\"\nsomeNiceInput.input.something...\n```\n\n## Usage Examples\n\nHere you can find a nice project which combines this module with other modules to create a realtime chat app prototype using Firebase: [FramerJS-Firebase-Demo](https://github.com/charleswong28/FramerJS-Firebase-Demo/)\n\nIf you have done something cool and want to show it, just make a pull request to the project :)\n","funding_links":[],"categories":["Modules"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajimix%2FInput-Framer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajimix%2FInput-Framer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajimix%2FInput-Framer/lists"}