{"id":13544002,"url":"https://github.com/avocode/react-tabguard","last_synced_at":"2025-07-22T17:37:40.432Z","repository":{"id":6886790,"uuid":"55621423","full_name":"avocode/react-tabguard","owner":"avocode","description":"Limit tabbing within specified area with an ease","archived":false,"fork":false,"pushed_at":"2022-12-11T16:42:24.000Z","size":1218,"stargazers_count":63,"open_issues_count":18,"forks_count":9,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-16T00:48:12.094Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/avocode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-06T16:16:19.000Z","updated_at":"2021-01-14T19:09:06.000Z","dependencies_parsed_at":"2023-01-13T14:09:17.196Z","dependency_job_id":null,"html_url":"https://github.com/avocode/react-tabguard","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/avocode%2Freact-tabguard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Freact-tabguard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Freact-tabguard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avocode%2Freact-tabguard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avocode","download_url":"https://codeload.github.com/avocode/react-tabguard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251758170,"owners_count":21638989,"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":[],"created_at":"2024-08-01T11:00:40.448Z","updated_at":"2025-04-30T18:10:36.295Z","avatar_url":"https://github.com/avocode.png","language":"CoffeeScript","funding_links":[],"categories":["UI Components","Demos"],"sub_categories":["Form Components"],"readme":"React TabGuard\n=============\n\n![React TabGuard example](https://cldup.com/T9a7pbSgTA.gif)\n\n\n## Installation:\n\n`npm install react-tabguard`\n\n## Why?\n\nThere is no easy way to limit tabbing to a specified area inside your HMTL document. The typical use case where you want to restrict this behavior would be modal dialogs or lightboxes with forms. It’s not desirable to lose focus on the overlay window when tabbing, that's why we created React TabGuard to save the day.\n\n## Usage:\n\n```\n'use strict';\n\nlet React = require('react');\nlet TabGuard = require('react-tabguard');\n\nlet App = React.createClass({\n  render: function() {\n    return (\n      \u003cTabGuard\u003e\n        \u003cinput type=\"text\" placeholder=\"Name\"/\u003e\n        \u003cinput type=\"number\" placeholder=\"Age\"/\u003e\n        \u003cbutton\u003eSend\u003c/button\u003e\n      \u003c/TabGuard\u003e\n    );\n  }\n});\n\nReact.render(\u003cApp /\u003e, document.getElementById('content'));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favocode%2Freact-tabguard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favocode%2Freact-tabguard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favocode%2Freact-tabguard/lists"}