Chore(css): ensure each component receives appropriate classes & styles

stereobooster · Jun 4, 2023 · e661536 · e661536
1 parent aab28a6
commit e661536
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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}