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";

<Dock width={800} magnification={2} magnifyDirection="up">
  {["a", "b", "c", "d", "e"].map((item, index) => (
    <Dock.Item key={index} onClick={() => console.log(item)}>
      <img src={`${item}.png`} />
    </Dock.Item>
  ))}
</Dock>

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
onMouseOver	The dock item's mouse over event handler.	function	no default: undefined
onMouseOut	The dock item's mouse out event handler.	function	no default: undefined

Contributing

Pull requests are most welcome. Clone this repository and run npm test to 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!