react-osx-dock
v2.0.0
Published
React component that is magnifiable like the Mac OS X dock.
Downloads
160
Maintainers
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';
<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 ("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!