React component that is magnifiable like the Mac OS X dock.
Available items
No Items, yet!
The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
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!