Gathering detailed insights and metrics for react-image-designer
Installations
npm install react-image-designerDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
13.6.0
NPM Version
6.13.4
Score
66.8
Supply Chain
93.2
Quality
75.5
Maintenance
100
Vulnerability
100
License
Releases
21
Contributors
1
Unable to fetch Contributors
Languages
2
JavaScript
HTML
JavaScript (97.59%)
HTML (2.41%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
LongStoryMedia
Download Statistics
Total Downloads
5,992
Last Day
5
Last Week
19
Last Month
115
Last Year
1,053
GitHub Statistics
MIT License
1 Stars
54 Commits
2 Watchers
1 Branches
1 Contributors
Updated on Jan 20, 2020
Bundle Size
6.54 kB
Minified
2.51 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.2.1
Package Id
react-image-designer@1.2.1
Unpacked Size
1.33 MB
Size
1.29 MB
File Count
27
NPM Version
6.13.4
Node Version
13.6.0
Total Downloads
Cumulative downloads
Total Downloads
5,992
Last Day
66.7%
5
Compared to previous day
Last Week
-36.7%
19
Compared to previous week
Last Month
150%
115
Compared to previous month
Last Year
41.5%
1,053
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
25
@babel/core@babel/node@babel/plugin-proposal-class-properties@babel/plugin-proposal-object-rest-spread@babel/preset-env@babel/preset-react@testing-library/reactbabel-eslintbabel-loaderclean-webpack-plugineslinteslint-loadereslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reacthtml-webpack-pluginjestjsdomjsdom-globalreactreact-domreact-test-rendererwebpackwebpack-cliwebpack-dev-server
React Image Designer
Features
- Can be background-image, or src. Just specify they base element tag in props.
- Loads only if visible in window.
- Support for srcset and sizes.
- Placeholder present until src image is loaded (blank by default)
- Can set custom timeout to delay src image load
background
this project is influenced heavily by react-progressive-image. However, it appears they are no longer making updates to it (at least not new features), and I needed something similar that had options to generate background-images, use dynamic base element types, and handle children. I also prefer a simplified syntax.
Install
yarn
1$ yarn add react-image-designer
npm
1$ npm install react-image-designer
The UMD build is also available on unpkg:
1<script src="https://unpkg.com/react-image-designer/umd/react-image-designer.min.js"></script>
If you use the UMD build you can find the library on window.__RID.
Props
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
| src | string | true | source of main image | required - no default |
| placeholder | string | false | source of placeholder images | "" |
| style | obj | false | inline styles for component | {} |
| className | string | false | class for the base element | "" |
| id | string | false | id for the base element | "" |
| contain | boolean | false | if background-size is 'contain' (else 'cover') | false |
| repeat | boolean | false | if image repeats (background images only) | false |
| position | string | false | background-position style string | browser default |
| children | React Children | false | any string, html, or react element to embed | "" |
| alt | string | false | string for alt attribute if img tag | src |
| tag | string | false | html element type for img (e.g. - img, div, figure etc.) | "img" |
| srcset | string | false | srcset | "" |
| sizes | string | false | sizes for srcset | "" |
| noImage | boolean | false | if true, no image is used (for text only) | false |
| timeout | number | false | delay in milliseconds before src is loaded | 0 |
| lazy | boolean | false | if img should be lazy-loaded | true |
Simple
1<ImageDesigner 2 src={img.src} 3 placeholder={img.placeholder} 4 style={{ 5 height: "auto", 6 margin: "auto" 7 }} 8/>
With Caption (as background-image)
1<ImageDesigner 2 src={img.src} 3 srcset={img.srcset} 4 sizes={img.sizes} 5 placeholder={img.placeholder} 6 id={["img", i].join("-")} 7 className={imgClass} 8 tag="div" 9> 10 <div 11 className={captionClass} 12 dangerouslySetInnerHTML={{ 13 __html: tryDecode(img.caption) 14 }} 15 /> 16</ImageDesigner>
Try Things Live
to test the options, git clone this repo, put some images in the 'imgs' directory, and set-up your configuration somewhere in the 'src' directory. Then run yarn start ./relative/path/from/src/to/configuration or npm run start ./relative/path/from/src/to/configuration. There is an example provided. To run it locally, execute yarn start ./dev-scripts/example or npm run start ./dev-scripts/example.
Contributing
clone, install, tinker, submit. Thanks!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Score
3
/10
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More