From e6615369221cff9282755ff2a7747c7a5fcbfb7a Mon Sep 17 00:00:00 2001
From: poop <noahedwardhall@gmail.com>
Date: Sun, 4 Jun 2023 11:33:46 -0500
Subject: [PATCH] Chore(css): ensure each component receives appropriate
 classes & styles

---
 README.md     | 12 ++++++++++--
 src/Media.tsx |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e0f9039..dd70b6e 100644
--- a/README.md
+++ b/README.md
@@ -11,17 +11,25 @@
 - framer-motion replaces react-waypoint
 
 ```sh
-bun add github:noahehall/react-idealer-image
+bun add \
+  github:noahehall/react-idealer-image \
+  framer-motion \
+  react \
+  react-dom
 ```
 
 ```ts
 import { IdealImage } from "react-idealer-image";
 
 const App = () => (
+  /** check the component source for the full api */
   <IdealImage
-    motionProps={} /* see framer-motion docs */
+    /* see framer-motion docs */
+    /* motionProps={} */
     alt="ideal image"
+    // you should also add specific width & height set to numbers
     srcSet={[{ src: "some/image.webp" }]}
+    // prefer passing width && height set to numbers
     width={"100%"}
   />
 );
diff --git a/src/Media.tsx b/src/Media.tsx
index aa44873..7fb5646 100644
--- a/src/Media.tsx
+++ b/src/Media.tsx
@@ -83,7 +83,7 @@ export const Media: FC<MediaInterface> = ({
   }, [onDimensions]);
 
   return (
-    <div style={useStyle} onClick={onClick}>
+    <div className="media" style={useStyle} onClick={onClick}>
       <Image
         motionProps={motionProps}
         alt={alt}