Update readme

lukehorvat · Mar 3, 2024 · 5e859ee · 5e859ee
1 parent d330425
commit 5e859ee
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,6 @@
-# react-osx-dock [![NPM version](http://img.shields.io/npm/v/react-osx-dock.svg?style=flat-square)](https://www.npmjs.com/package/react-osx-dock)
+# react-osx-dock [![npm version](https://img.shields.io/npm/v/react-osx-dock.svg?style=flat-square)](https://www.npmjs.com/package/react-osx-dock)
 
-<p align="center">
-  <img src="https://i.imgur.com/e8Q6ddo.gif">
-</p>
+![](https://i.imgur.com/e8Q6ddo.gif)
 
 [React](https://reactjs.org) component that is magnifiable like the Mac OS X dock.
 
@@ -14,53 +12,43 @@ View a demo [here](https://lukehorvat.github.io/react-osx-dock).
 
 Install the package with NPM:
 
-```bash
-$ npm install react-osx-dock
+```sh
+npm install react-osx-dock
 ```
 
 ## Usage
 
 Example:
 
-```javascript
-import Dock from "react-osx-dock";
+```jsx
+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>
+  {['A', 'B', 'C', 'D', 'E', 'F', 'G'].map((letter) => (
+    <img
+      className="letter"
+      src={`${letter}.png`}
+      onClick={() => console.log(letter)}
+      key={letter}
+    />
   ))}
 </Dock>
 ```
 
 ## API
 
-### Dock
+The `Dock` component has the following props:
 
-React component that accepts [Dock.Item](#dockitem)s 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 <br><br> (`"up"`, `"down"`, `"center"`) | yes                              |
+| `className`           | The dock's CSS class.                                               | string                                              | no <br><br> default: `undefined` |
+| `backgroundClassName` | The dock background's CSS class.                                    | string                                              | no <br><br> default: `undefined` |
+| `debug`               | Whether to render dock bounding boxes or not. Useful for debugging! | boolean                                             | no <br><br> default: `false`     |
 
-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 <br><br> (`"up"`, `"down"`, `"center"`) | yes
-`className` | The dock's CSS class. | string | no <br><br> default: `undefined`
-`backgroundClassName` | The dock background's CSS class. | string | no <br><br> default: `undefined`
-`debug` | Whether to render dock sub-component bounding boxes or not. Useful for debugging! | boolean | no <br><br> 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 <br><br> default: `undefined`
-`onClick` | The dock item's mouse click event handler. | function | no <br><br> default: `undefined`
-
-## Contributing
-
-Pull requests are most welcome. Clone this repository and run `npm test` to test/debug your code changes.
+Any children provided to the `Dock` component will be considered "dock items" and wrapped accordingly to facilitate the magnification behavior.
 
 ## Credits
 

diff --git a/lib/Dock.tsx b/lib/Dock.tsx
@@ -11,7 +11,7 @@ export function Dock(props: {
   backgroundClassName?: string;
   debug?: boolean;
   children?: React.ReactNode;
-}) {
+}): React.JSX.Element {
   const [magnifierX, setMagnifierX] = React.useState<number | null>(null);
   const unmagnifiedItemWidth =
     props.width / React.Children.count(props.children);