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";
<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>
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 |
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 |
Pull requests are most welcome. Clone this repository and run npm test
to test/debug your code changes.
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!