lukehorvat / React Osx Dock
Licence: mit
React component that is magnifiable like the Mac OS X dock.
Stars: ✭ 136
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Osx Dock
Dzhtmltext
Delphi and Lazarus HTML Label component
Stars: ✭ 60 (-55.88%)
Mutual labels: osx, component
Vue Blu
UI Component Library Base on Vue.js(2.x) and Bulma
Stars: ✭ 1,593 (+1071.32%)
Mutual labels: component
React Splitters
React splitter component, written in TypeScript.
Stars: ✭ 127 (-6.62%)
Mutual labels: component
Autoresponsive Vue
Auto responsive grid layout library for Vue.
Stars: ✭ 132 (-2.94%)
Mutual labels: component
React Modal Box
React Modal Box, is a simple dependency free and customizable React Component to display Modals on your application. Its simple event system allows you to place the modal in the root component of your application, and calling it with the simple mixins, allows you to be flexible. It also includes event handling mixins, so you can detect when the modal is being called or being hidden.
Stars: ✭ 126 (-7.35%)
Mutual labels: component
Osx Kvm
Run macOS on QEMU/KVM. With OpenCore + Big Sur + Monterey support now! Only commercial (paid) support is available now to avoid spammy issues. No Mac system is required.
Stars: ✭ 12,926 (+9404.41%)
Mutual labels: osx
React Native Circular Menu
A Ripple menu effect for your react native application
Stars: ✭ 129 (-5.15%)
Mutual labels: component
Vscode of
openFrameworks empty example for visual studio code
Stars: ✭ 129 (-5.15%)
Mutual labels: osx
Evilosx
An evil RAT (Remote Administration Tool) for macOS / OS X.
Stars: ✭ 1,826 (+1242.65%)
Mutual labels: osx
Property Info
PropertyInfo extracts information about PHP class' properties using metadata of popular sources.
Stars: ✭ 1,747 (+1184.56%)
Mutual labels: component
Toggle Switch React Native
Toggle Switch React Native Component works on both iOS and Android
Stars: ✭ 131 (-3.68%)
Mutual labels: component
react-osx-dock 
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:
- Social icons designed by Bogdan Rosu.
- Pokémon icons designed by Roundicons Freebies.
Thanks!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].