https://github.com/lukehorvat/react-osx-dock
React component that is magnifiable like the Mac OS X dock.
https://github.com/lukehorvat/react-osx-dock
component dock osx react
Last synced: 9 months ago
JSON representation
React component that is magnifiable like the Mac OS X dock.
- Host: GitHub
- URL: https://github.com/lukehorvat/react-osx-dock
- Owner: lukehorvat
- License: mit
- Created: 2017-10-29T05:14:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-09T12:14:42.000Z (about 2 years ago)
- Last Synced: 2025-03-30T09:09:11.469Z (over 1 year ago)
- Topics: component, dock, osx, react
- Language: TypeScript
- Homepage: https://lukehorvat.github.io/react-osx-dock
- Size: 1.11 MB
- Stars: 186
- Watchers: 2
- Forks: 17
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-osx-dock [](https://www.npmjs.com/package/react-osx-dock)
[React](https://reactjs.org) component that is magnifiable like the Mac OS X dock.
Works 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.
View a demo [here](https://lukehorvat.github.io/react-osx-dock).
## Installation
Install the package with NPM:
```sh
npm install react-osx-dock
```
## Usage
Example:
```jsx
import { Dock } from 'react-osx-dock';
{['A', 'B', 'C', 'D', 'E', 'F', 'G'].map((letter) => (
console.log(letter)}
key={letter}
/>
))}
```
## API
The `Dock` component has the following props:
| Name | Description | Type | Required |
| --------------------- | ------------------------------------------------------------------- | --------------------------------------------------- | -------------------------------- |
| `itemWidth` | The default (i.e. unmagnified) width of dock items in pixels. | number | yes |
| `magnification` | The % amount of dock item magnification produced on mouse-over. | number | yes |
| `magnifyDirection` | The vertical direction that dock items grow when magnified. | string enum
(`"up"`, `"down"`, `"center"`) | yes |
| `className` | The dock's CSS class. | string | no
default: `undefined` |
| `backgroundClassName` | The dock background's CSS class. | string | no
default: `undefined` |
| `debug` | Whether to render dock bounding boxes or not. Useful for debugging! | boolean | no
default: `false` |
Any children provided to the `Dock` component will be considered "dock items" and wrapped accordingly to facilitate the magnification behavior.
## Credits
The demo website uses a couple of free icon packs from [FlatIcon](https://flaticon.com):
- [Social icons](https://flaticon.com/packs/glypho) designed by Bogdan Rosu.
- [Pokémon icons](https://flaticon.com/packs/pokemon-go) designed by Roundicons Freebies.
Thanks!