lukehorvat/ react-osx-dock
Need help with react-osx-dock?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
About the developer
135 Stars 
14 Forks 
MIT License 
19 Commits 
3 Opened issues 
Description
React component that is magnifiable like the Mac OS X dock.
Services available
Contributors list
Readme
react-osx-dock 
React component that is magnifiable like the Mac OS X dock.
Works in any Web browser that supports CSS grid and flexbox layout.
View a demo here.
Installation
Install the package with NPM:
$ npm install react-osx-dock
Usage
Example:
import Dock from "react-osx-dock";
{["a", "b", "c", "d", "e"].map((item, index) => (
console.log(item)}>
))}
API
Dock
React component that accepts Dock.Items as children, and the following props:
Name |
Description | Type | Required |
|---|
width| The width of the dock in pixels. | number | yes
magnification| The level of dock 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 sub-component bounding boxes or not. Useful for debugging! | boolean | no
default:
false
Dock.Item
React component that accepts any HTML/React elements as children, and the following props:
Name |
Description | Type | Required |
|---|
className| The dock item's CSS class. | string | no
default:
undefined
onClick| The dock item's mouse click event handler. | function | no
default:
undefined
Contributing
Pull requests are most welcome. Clone this repository and run
npm testto test/debug your code changes.
Credits
The demo website uses a couple of free icon packs from FlatIcon:
- Social icons designed by Bogdan Rosu.
- Pokémon icons designed by Roundicons Freebies.
Thanks!