{"id":24225690,"url":"https://github.com/lukehorvat/react-osx-dock","last_synced_at":"2025-10-13T18:39:28.463Z","repository":{"id":57342151,"uuid":"108707141","full_name":"lukehorvat/react-osx-dock","owner":"lukehorvat","description":"React component that is magnifiable like the Mac OS X dock.","archived":false,"fork":false,"pushed_at":"2024-06-09T12:14:42.000Z","size":1164,"stargazers_count":186,"open_issues_count":3,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T09:09:11.469Z","etag":null,"topics":["component","dock","osx","react"],"latest_commit_sha":null,"homepage":"https://lukehorvat.github.io/react-osx-dock","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/lukehorvat.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":"2017-10-29T05:14:28.000Z","updated_at":"2025-02-22T12:49:14.000Z","dependencies_parsed_at":"2024-06-09T13:33:47.560Z","dependency_job_id":"c65807d7-dd9d-4145-8681-39f57fe77f3b","html_url":"https://github.com/lukehorvat/react-osx-dock","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":0.05555555555555558,"last_synced_commit":"08ce0be376eda9487cbdef6e4ba3a78ec913f5c0"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukehorvat%2Freact-osx-dock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukehorvat%2Freact-osx-dock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukehorvat%2Freact-osx-dock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukehorvat%2Freact-osx-dock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukehorvat","download_url":"https://codeload.github.com/lukehorvat/react-osx-dock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247471521,"owners_count":20944158,"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":["component","dock","osx","react"],"created_at":"2025-01-14T08:15:26.635Z","updated_at":"2025-10-13T18:39:23.422Z","avatar_url":"https://github.com/lukehorvat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-osx-dock [![npm version](https://img.shields.io/npm/v/react-osx-dock.svg?style=flat-square)](https://www.npmjs.com/package/react-osx-dock)\n\n![](https://i.imgur.com/e8Q6ddo.gif)\n\n[React](https://reactjs.org) component that is magnifiable like the Mac OS X dock.\n\nWorks in any Web browser that supports CSS [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) and [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) layout.\n\nView a demo [here](https://lukehorvat.github.io/react-osx-dock).\n\n## Installation\n\nInstall the package with NPM:\n\n```sh\nnpm install react-osx-dock\n```\n\n## Usage\n\nExample:\n\n```jsx\nimport { Dock } from 'react-osx-dock';\n\n\u003cDock itemWidth={50} magnification={2} magnifyDirection=\"up\"\u003e\n  {['A', 'B', 'C', 'D', 'E', 'F', 'G'].map((letter) =\u003e (\n    \u003cimg\n      className=\"letter\"\n      src={`${letter}.png`}\n      onClick={() =\u003e console.log(letter)}\n      key={letter}\n    /\u003e\n  ))}\n\u003c/Dock\u003e\n```\n\n## API\n\nThe `Dock` component has the following props:\n\n| Name                  | Description                                                         | Type                                                | Required                         |\n| --------------------- | ------------------------------------------------------------------- | --------------------------------------------------- | -------------------------------- |\n| `itemWidth`           | The default (i.e. unmagnified) width of dock items in pixels.       | number                                              | yes                              |\n| `magnification`       | The % amount of dock item magnification produced on mouse-over.     | number                                              | yes                              |\n| `magnifyDirection`    | The vertical direction that dock items grow when magnified.         | string enum \u003cbr\u003e\u003cbr\u003e (`\"up\"`, `\"down\"`, `\"center\"`) | yes                              |\n| `className`           | The dock's CSS class.                                               | string                                              | no \u003cbr\u003e\u003cbr\u003e default: `undefined` |\n| `backgroundClassName` | The dock background's CSS class.                                    | string                                              | no \u003cbr\u003e\u003cbr\u003e default: `undefined` |\n| `debug`               | Whether to render dock bounding boxes or not. Useful for debugging! | boolean                                             | no \u003cbr\u003e\u003cbr\u003e default: `false`     |\n\nAny children provided to the `Dock` component will be considered \"dock items\" and wrapped accordingly to facilitate the magnification behavior.\n\n## Credits\n\nThe demo website uses a couple of free icon packs from [FlatIcon](https://flaticon.com):\n\n- [Social icons](https://flaticon.com/packs/glypho) designed by Bogdan Rosu.\n- [Pokémon icons](https://flaticon.com/packs/pokemon-go) designed by Roundicons Freebies.\n\nThanks!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukehorvat%2Freact-osx-dock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukehorvat%2Freact-osx-dock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukehorvat%2Freact-osx-dock/lists"}