react-skeleton-image - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

package.json

 {
   "name": "react-skeleton-image",
-  "version": "0.0.4",
-  "description": "A skeleton image component which handles the image's loading and error state.",
+  "version": "0.0.5",
+  "description": "A skeleton image component which handles an image's loading and error states.",
   "main": "dist/index.js",
@@ -45,5 +45,5 @@ "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsup src/index.tsx --format cjs",
+    "build": "tsup src/index.tsx --format cjs,esm",
     "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\""
   }
 }

README.md

@@ -1,1 +0,80 @@
-# react-skeleton-image
+# React Skeleton Image
+
+A skeleton image component which handles an image's loading and error states.
+
+> This is a simple React image component which abstracts away all the dirty work you have to do to handle loading and error states of images.
+
+## Installation
+
+```bash
+npm i react-skeleton-image
+```
+
+or
+
+```bash
+yarn add react-skeleton-image
+```
+
+or
+
+```bash
+pnpm add react-skeleton-image
+```
+
+## Usage
+
+After installing the package, import `Image` component:
+
+```js
+import { Image } from 'react-skeleton-image'
+```
+
+Import the CSS file (This step will not be needed in the next release):
+
+```js
+import 'react-skeleton-image/dist/index.css'
+```
+
+You need to specify both `width` and `height` for the proper image sizing.
+
+```jsx
+<Image
+  src='https://rb.gy/fgpqyt'
+  width={300}
+  height={200}
+/>
+```
+
+You can also specify the width and height in a container and wrap the Image component with it.
+
+```jsx
+<div style={{ width: 300, height: 200 }}>
+  <Image
+    src='https://rb.gy/fgpqyt'
+    width={300}
+    height={200}
+  />
+</div>
+```
+
+It is recommended to set css properties like `margin` and `padding` in the container instead of the Image component. 
+
+```jsx
+<div style={{ width: 300, height: 200, margin: 30 }}>
+  <Image
+    src='https://rb.gy/fgpqyt'
+    width={300}
+    height={200}
+  />
+</div>
+```
+
+## Props
+
+| Name                | Type            | Description                                          |
+| ------------------- | --------------- | ---------------------------------------------------- |
+| width               | number          | The width of the image in `px`.                      |
+| height              | number          | The height of the image in `px`.                     |
+| skeleton            | boolean         | Show skeleton loading. Default: `true`               |
+| skeletonClassName   | string          | The custom CSS class for skeleton loading.           |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17037

increased by70.69%

Number of package files

10

increased by25%

Lines of code

25

increased by31.58%

Number of lines in readme file

81

increased by3950%

No dependency changes