Need help with react-osx-dock?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

lukehorvat
135 Stars 14 Forks MIT License 19 Commits 3 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 94,641
jonschl...
Markdow...
compile
exec
17 commits
# 95,873
algolia...
Algolia
GraphQL
express...
1 commit

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.