Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-osx-dock NPM version

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

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:

Thanks!