Awesome

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 itemWidth={50} magnification={2} magnifyDirection="up">
  {['A', 'B', 'C', 'D', 'E', 'F', 'G'].map((letter) => (
    <img
      className="letter"
      src={`${letter}.png`}
      onClick={() => console.log(letter)}
      key={letter}
    />
  ))}
</Dock>

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 <br><br> (`"up"`, `"down"`, `"center"`)	yes
`className`	The dock's CSS class.	string	no <br><br> default: `undefined`
`backgroundClassName`	The dock background's CSS class.	string	no <br><br> default: `undefined`
`debug`	Whether to render dock bounding boxes or not. Useful for debugging!	boolean	no <br><br> 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:

Social icons designed by Bogdan Rosu.
Pokémon icons designed by Roundicons Freebies.

Thanks!