{"id":22812125,"url":"https://github.com/tanisha03/react-3d-hover","last_synced_at":"2025-07-29T12:32:23.689Z","repository":{"id":65480718,"uuid":"369126507","full_name":"tanisha03/react-3d-hover","owner":"tanisha03","description":"Tiny React Package for a smooth 3D Hover","archived":false,"fork":false,"pushed_at":"2021-05-22T17:28:26.000Z","size":646,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-03T20:29:47.524Z","etag":null,"topics":["3d-hover","hover-effects","microinteractions","npm-package","react","tiny"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-3d-hover","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tanisha03.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-20T07:52:55.000Z","updated_at":"2024-05-12T11:00:40.000Z","dependencies_parsed_at":"2023-01-25T20:00:38.757Z","dependency_job_id":null,"html_url":"https://github.com/tanisha03/react-3d-hover","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tanisha03/react-3d-hover","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanisha03%2Freact-3d-hover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanisha03%2Freact-3d-hover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanisha03%2Freact-3d-hover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanisha03%2Freact-3d-hover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tanisha03","download_url":"https://codeload.github.com/tanisha03/react-3d-hover/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanisha03%2Freact-3d-hover/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267686340,"owners_count":24127715,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["3d-hover","hover-effects","microinteractions","npm-package","react","tiny"],"created_at":"2024-12-12T12:10:00.834Z","updated_at":"2025-07-29T12:32:23.653Z","avatar_url":"https://github.com/tanisha03.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-3d-hover\n\n[![npm version][npm-badge]][npm-url]\n[![npm bundle size][size-badge]][npm-url]\n\n_\"A tiny package to hover smooth as butter for **React**\"_\n\n\n## Requirements\n\nThis package uses hooks internally so it has a requirement of React version 16.8 or above.\n\n## Installation\n\nThis package is hosted on [npm](https://www.npmjs.com/package/react-3d-hover)\n\n`npm i react-3d-hover`\n\n## Usage\n\nThis component is imported and used like any standard React component\n\n```jsx\nimport React from 'react';\nimport Hover from 'react-3d-hover';\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv class=\"App\"\u003e\n      \u003cHover\u003e\u003c/Hover\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n## Props\n\nHere is a list of available options with their defaults:\n\n| Props | Default  | Description |\n| ------- | -----| ------------------- |\n| style | {}  | A jsx style object that will be applied to the root element | \n| max | 10  | Max tilt rotation (degrees) |\n| perspective | 1000  | Transform perspective, the lower the more extreme the tilt gets | \n| scale | 1  | multiply size on hover: 2 = 200%, 1.5 = 150%, etc.. | \n| speed | 400  | Speed of the enter/exit transition | \n| easing | cubic-bezier(.03,.98,.52,.99)  | Easing on enter/exit | \n| onMouseEnter | (e) =\u003e {}  | A callback function for the mouse enter event  | \n| onMouseMove | (e) =\u003e {}  | A callback function for the mouse move event  | \n| onMouseLeave | (e) =\u003e {}  | A callback function for the mouse leave event  | \n\n\n**Example:**\n\n```jsx\n\u003cHover scale={1.2} perspective={900} speed={500}\u003e\n  \u003cdiv\u003eHello World\u003c/div\u003e\n\u003c/Hover\u003e\n```\n\n\n## License\n\n[MIT License](./LICENSE)\n\n[npm-url]: https://www.npmjs.com/package/react-3d-hover\n[license-url]: ./LICENSE\n[npm-badge]: https://badge.fury.io/js/react-3d-hover.svg\n[size-badge]: https://img.shields.io/bundlephobia/minzip/react-3d-hover.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanisha03%2Freact-3d-hover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftanisha03%2Freact-3d-hover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanisha03%2Freact-3d-hover/lists"}