react-osx-dock icon indicating copy to clipboard operation
react-osx-dock copied to clipboard

Published 20 hours ago • verified publisher icon lukehorvat
→

Metadata

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

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!

← Metadata

175
Stars
18
Forks
Watchers

Owner

verified publisher icon lukehorvat

Metadata

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

Back