{"id":16346810,"url":"https://github.com/cht8687/react-hover","last_synced_at":"2025-04-06T22:09:13.839Z","repository":{"id":2925063,"uuid":"47900705","full_name":"cht8687/react-hover","owner":"cht8687","description":"React hover --- make hover easy http://cht8687.github.io/react-hover/example/","archived":false,"fork":false,"pushed_at":"2023-10-27T01:42:07.000Z","size":7728,"stargazers_count":106,"open_issues_count":10,"forks_count":25,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-30T21:06:38.335Z","etag":null,"topics":["hover","hover-components","react","react-component"],"latest_commit_sha":null,"homepage":"","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/cht8687.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}},"created_at":"2015-12-13T00:53:36.000Z","updated_at":"2024-12-28T03:10:57.000Z","dependencies_parsed_at":"2024-06-18T15:45:27.868Z","dependency_job_id":"e6b29abd-d3a1-4c21-8d70-473b99511ce6","html_url":"https://github.com/cht8687/react-hover","commit_stats":{"total_commits":169,"total_committers":8,"mean_commits":21.125,"dds":0.2544378698224852,"last_synced_commit":"a7c484bea2cb204f0a272aeecc4bb49c9d16a69a"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cht8687%2Freact-hover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cht8687%2Freact-hover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cht8687%2Freact-hover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cht8687%2Freact-hover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cht8687","download_url":"https://codeload.github.com/cht8687/react-hover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247557767,"owners_count":20958047,"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":["hover","hover-components","react","react-component"],"created_at":"2024-10-11T00:37:34.857Z","updated_at":"2025-04-06T22:09:13.816Z","avatar_url":"https://github.com/cht8687.png","language":"JavaScript","readme":"\u003cbig\u003e\u003ch1 align=\"center\"\u003eReact Hover --- Turn anything to a 'hoverable' object\u003c/h1\u003e\u003c/big\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://circleci.com/gh/cht8687/react-hover\"\u003e\n    \u003cimg src=\"https://circleci.com/gh/cht8687/react-hover.svg?style=shield\"\n         alt=\"Circle CI\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/react-hover\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-hover.svg?style=flat-square\"\n         alt=\"NPM Version\"\u003e\n  \u003c/a\u003e\n\n \u003ca href=\"https://coveralls.io/github/cht8687/react-hover?branch=master\"\u003e\n    \u003cimg src=\"https://coveralls.io/repos/cht8687/react-hover/badge.svg?branch=master\u0026service=github\" alt=\"Coverage Status\" /\u003e\n \u003c/a\u003e\n\n  \u003ca href=\"https://travis-ci.org/cht8687/react-hover\"\u003e\n    \u003cimg src=\"https://img.shields.io/travis/cht8687/react-hover.svg?style=flat-square\"\n         alt=\"Build Status\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://npmjs.org/package/react-hover\"\u003e\n    \u003cimg src=\"http://img.shields.io/npm/dm/react-hover.svg?style=flat-square\"\n         alt=\"Downloads\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/cht8687/react-hover/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/react-hover.svg?style=flat-square\"\n         alt=\"License\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cbig\u003e\n\n\u003c/big\u003e\u003c/p\u003e\n\n![React hover](src/example/react-hover-new.gif)\n\n## Installation\n\n### npm\n\n```\n$ npm install --save react-hover\n```\n\n## Codesandbox Demo \n\n[Codesandbox example](https://codesandbox.io/s/charming-snyder-3hund?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Demo\n\n[Demo](http://cht8687.github.io/react-hover/example/)\n\n\n## Usage\n\nYou can turn plain HTML or your custom trigger/hover components in React-hover.\n\nBelow is the example of custom components:\n\n```js\n\u003cReactHover options={optionsCursorTrueWithMargin}\u003e\n  \u003cTrigger type=\"trigger\"\u003e\n    \u003cTriggerComponent /\u003e\n  \u003c/Trigger\u003e\n  \u003cHover type=\"hover\"\u003e\n    \u003cHoverComponent /\u003e\n  \u003c/Hover\u003e\n\u003c/ReactHover\u003e\n```\n\nOr plain HTML element:\n\n```js\n\u003cReactHover options={optionsCursorTrueWithMargin}\u003e\n  \u003cTrigger type=\"trigger\"\u003e\n    \u003ch1 style={{ background: '#abbcf1', width: '200px' }}\u003e Hover on me \u003c/h1\u003e\n  \u003c/Trigger\u003e\n  \u003cHover type=\"hover\"\u003e\n    \u003ch1\u003e I am hover HTML \u003c/h1\u003e\n  \u003c/Hover\u003e\n\u003c/ReactHover\u003e\n```\n\n## Options\n\n#### `options`: PropTypes.object.isRequired\n\nSet the options.\n\n```js\nconst options = {\n  followCursor: true,\n  shiftX: 20,\n  shiftY: 0,\n}\n```\n\n`followCursor`: define if hover object follow mouse cursor\n`shiftX`: left-right shift the hover object to the mouse cursor\n`shiftY`: up-down shift the hover object to the mouse cursor\n\n## type\n\n#### `type`: PropTypes.string\n\nSet the type.\n\n```js\n\n\u003cTrigger type='trigger'\u003e\n\u003cHover type='hover'\u003e\n\n```\n\nThis prop defines the type name. It must be declared as above if you minify your code in production.\n\n## Development\n\n```\n$ git clone git@github.com:cht8687/react-hover.git\n$ cd react-hover\n$ npm install\n$ npm run dev\n```\n\nThen\n\n```\nopen http://localhost:8080/webpack-dev-server/\n```\n\n## Want to buy me a coffee?\n\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/X8X71IORB)\n\n## License\n\nMIT\n\n## Contributors\n\nThanks to these wonderful developers for helping this project:\n\n\u003cp float=\"left\"\u003e\n    \u003ca href=\"https://github.com/illiteratewriter\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/5787110?s=400\u0026v=4\" width=\"50\" height=\"50\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/simPod\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/327717?s=400\u0026v=4\" width=\"50\" height=\"50\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/bucketsec\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/35276194?s=400\u0026v=4\" width=\"50\" height=\"50\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/Isaius\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/37005228?v=4\" width=\"50\" height=\"50\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n","funding_links":["https://ko-fi.com/X8X71IORB"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcht8687%2Freact-hover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcht8687%2Freact-hover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcht8687%2Freact-hover/lists"}