react-osx-dock

by lukehorvat

lukehorvat / react-osx-dock

React component that is magnifiable like the Mac OS X dock.

134 Stars 14 Forks Last release: almost 3 years ago (v1.0.0) MIT License 19 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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";


  {["a", "b", "c", "d", "e"].map((item, index) => (
     console.log(item)}>
      
    
  ))}

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!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.