{"id":15398175,"url":"https://github.com/emasuriano/react-hotkey-tooltip","last_synced_at":"2025-04-09T10:07:37.856Z","repository":{"id":29018267,"uuid":"120014358","full_name":"EmaSuriano/react-hotkey-tooltip","owner":"EmaSuriano","description":"A global Hotkey provider with built in tooltip for React","archived":false,"fork":false,"pushed_at":"2025-04-01T12:58:13.000Z","size":19076,"stargazers_count":34,"open_issues_count":11,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T09:08:23.103Z","etag":null,"topics":["hotkey","hotkeys","keyboard-shortcuts","mousetrap","react","react-component","shortcut","tooltip"],"latest_commit_sha":null,"homepage":"https://react-hotkey-tooltip-storybook.netlify.app","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/EmaSuriano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-02T18:07:22.000Z","updated_at":"2025-02-15T08:47:39.000Z","dependencies_parsed_at":"2024-01-20T00:31:19.213Z","dependency_job_id":"36c9f224-8d29-4d1a-9e6d-508701d0403f","html_url":"https://github.com/EmaSuriano/react-hotkey-tooltip","commit_stats":{"total_commits":700,"total_committers":7,"mean_commits":100.0,"dds":0.5942857142857143,"last_synced_commit":"1096fe806ec0488cf6efe5d31e0e2b3ff32c45bf"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Freact-hotkey-tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Freact-hotkey-tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Freact-hotkey-tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Freact-hotkey-tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmaSuriano","download_url":"https://codeload.github.com/EmaSuriano/react-hotkey-tooltip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018060,"owners_count":21034048,"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":["hotkey","hotkeys","keyboard-shortcuts","mousetrap","react","react-component","shortcut","tooltip"],"created_at":"2024-10-01T15:41:23.818Z","updated_at":"2025-04-09T10:07:37.821Z","avatar_url":"https://github.com/EmaSuriano.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Hotkey Tooltip\n\n[![Master](https://github.com/EmaSuriano/react-hotkey-tooltip/actions/workflows/master.yml/badge.svg)](https://github.com/EmaSuriano/react-hotkey-tooltip/actions/workflows/master.yml)\n[![npm version](https://badge.fury.io/js/react-hotkey-tooltip.svg)](https://badge.fury.io/js/react-hotkey-tooltip)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/d8820ba2-2f51-4aa9-be7a-b11e6b7b65ae/deploy-status)](https://app.netlify.com/sites/react-hotkey-tooltip-storybook/deploys)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://react-hotkey-tooltip-storybook.netlify.app\" alt=\"logo\"\u003e\n    \u003cimg alt=\"react-hotkey-tooltip logo\" src=\"https://raw.githubusercontent.com/EmaSuriano/react-hotkey-tooltip/master/docs/logo.png\" height=\"150px\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eA global Hotkey provider with built in tooltip for React\u003c/strong\u003e\n\u003c/div\u003e\n\n## [Docs 📚](https://react-hotkey-tooltip-storybook.netlify.app)\n\n## Why you should use it?\n\nWhen working with Hotkeys in a React application we will find many problems when trying to implement it:\n\n- Hotkeys are only accessible inside a specific component (not globally).\n- Must take care of the Hotkeys manually throughout the life cycle.\n- Have to provide a way so the user can see all the Hotkeys on the screen.\n\nThis library will help you by declaring global Hotkeys that automatically will be updated by any life cycle of the component and show a tooltip by pressing a combination of keys ✨\n\n## Built with\n\nWhy mess up with document.addEventListener or positioning/styling Tooltips if there are a lot of open source libraries that can do that for me. These are the chosen ones!\n\n- [mousetrap](https://github.com/ccampbell/mousetrap): to bind and unbind Hotkeys globally 🌐\n- [@tippyjs/react](https://github.com/atomiks/tippyjs-react): to display beautiful Tooltips 😄\n\n## Installation\n\nYou can the package manager you want:\n\n```bash\n# npm\n$ npm install react-hotkey-tooltip\n\n# yarn\n$ yarn add react-hotkey-tooltip\n```\n\n## Example\n\n```javascript\nimport React from 'react';\nimport { Hotkey, HotkeyProvider } from 'react-hotkey-tooltip';\n\nconst ClickableButtonByPressingA = () =\u003e (\n  \u003cHotkeyProvider\u003e\n    \u003cHotkey combination=\"a\" onPress=\"click\"\u003e\n      \u003cbutton onClick={() =\u003e alert('You have clicked me!')}\u003e\n        Click me using your keyboard!\n      \u003c/button\u003e\n    \u003c/Hotkey\u003e\n  \u003c/HotkeyProvider\u003e\n);\n```\n\nFor more examples please consider checking the [Docs](https://react-hotkey-tooltip-storybook.netlify.app) section.\n\n## License\n\nMIT. Also check `react-tippy.js`' and `mousetrap`' license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femasuriano%2Freact-hotkey-tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femasuriano%2Freact-hotkey-tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femasuriano%2Freact-hotkey-tooltip/lists"}