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:

``sh
npm install react-osx-dock
`

Usage

Example:

`jsx
import { Dock } from 'react-osx-dock';


{['A', 'B', 'C', 'D', 'E', 'F', 'G'].map((letter) => (
className="letter"
src={${letter}.png}
onClick={() => console.log(letter)}
key={letter}
/>
))}

`

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

("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 bounding boxes or not. Useful for debugging! | boolean | no

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!