React component that is magnifiable like the Mac OS X 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.
Install the package with NPM:
$ npm install react-osx-dock
Example:
import Dock from "react-osx-dock"; {["a", "b", "c", "d", "e"].map((item, index) => ( console.log(item)}>))}
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
undefined
backgroundClassName| The dock background's CSS class. | string | no
undefined
debug| Whether to render dock sub-component bounding boxes or not. Useful for debugging! | boolean | no
false
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
undefined
onClick| The dock item's mouse click event handler. | function | no
undefined
Pull requests are most welcome. Clone this repository and run
npm testto test/debug your code changes.
The demo website uses a couple of free icon packs from FlatIcon:
Thanks!