react-skeleton-image
Advanced tools
react-skeleton-image - npm Package Compare versions
Comparing version 0.0.5 to 0.0.7
@@ -1,11 +0,2 @@ | ||
| import React from 'react'; | ||
| interface ImageProps extends React.HTMLProps<HTMLImageElement> { | ||
| width?: number; | ||
| height?: number; | ||
| skeleton?: boolean; | ||
| skeletonClassName?: string; | ||
| } | ||
| declare const Image: (props: ImageProps) => JSX.Element; | ||
| import Image from './components/Image/Image'; | ||
| export { Image }; |
| { | ||
| "name": "react-skeleton-image", | ||
| "version": "0.0.5", | ||
| "version": "0.0.7", | ||
| "description": "A skeleton image component which handles an image's loading and error states.", | ||
| "main": "dist/index.js", | ||
| "types": "./dist/index.d.ts", | ||
| "main": "dist/index.cjs.js", | ||
| "module": "dist/index.esm.js", | ||
| "types": "dist/index.d.ts", | ||
| "files": [ | ||
@@ -28,2 +29,6 @@ "dist", | ||
| "devDependencies": { | ||
| "@rollup/plugin-commonjs": "^24.0.1", | ||
| "@rollup/plugin-node-resolve": "^15.0.1", | ||
| "@rollup/plugin-terser": "^0.4.0", | ||
| "@rollup/plugin-typescript": "^11.0.0", | ||
| "@types/react": "^18.0.28", | ||
@@ -41,10 +46,10 @@ "@types/react-dom": "^18.0.11", | ||
| "react-dom": "^18.2.0", | ||
| "tslib": "^2.5.0", | ||
| "tsup": "^6.6.3", | ||
| "rollup": "^3.19.1", | ||
| "rollup-plugin-postcss": "^4.0.2", | ||
| "typescript": "^4.9.5" | ||
| }, | ||
| "scripts": { | ||
| "build": "tsup src/index.tsx --format cjs,esm", | ||
| "build": "rollup -c", | ||
| "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"" | ||
| } | ||
| } |
@@ -33,16 +33,6 @@ # 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} | ||
| /> | ||
| <Image src='https://rb.gy/fgpqyt' width={300} height={200} /> | ||
| ``` | ||
@@ -54,19 +44,11 @@ | ||
| <div style={{ width: 300, height: 200 }}> | ||
| <Image | ||
| src='https://rb.gy/fgpqyt' | ||
| width={300} | ||
| height={200} | ||
| /> | ||
| <Image src='https://rb.gy/fgpqyt' /> | ||
| </div> | ||
| ``` | ||
| It is recommended to set css properties like `margin` and `padding` in the container instead of the Image component. | ||
| It is recommended to set css properties like `margin`, `padding` and `border-radius` 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} | ||
| /> | ||
| <Image src='https://rb.gy/fgpqyt' /> | ||
| </div> | ||
@@ -77,7 +59,8 @@ ``` | ||
| | 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. | | ||
| | 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. | | ||
| | inline | boolean | Set Image's `display` property to `inline-block`. Default: `false`. | |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by44%
36
Worsened metrics
- Total package byte prevSize
- decreased by-12.36%
14932
- Dev dependency count
- increased by26.67%
19
- Number of lines in readme file
- decreased by-20.99%
64