MarkoCen / React Blur Image Loader
Licence: mit
Blurred progressive image loader for React
Stars: ✭ 57
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Blur Image Loader
Extended image
A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network, zoom pan image, photo view, slide out page, editor(crop,rotate,flip), paint custom etc.
Stars: ✭ 1,021 (+1691.23%)
Mutual labels: image
Imageviewer.swift
An easy to use Image Viewer that is inspired by Facebook
Stars: ✭ 1,071 (+1778.95%)
Mutual labels: image
Derpibooru Downloader
Downloads images from derpibooru.org using a variety of options
Stars: ✭ 45 (-21.05%)
Mutual labels: image
Vue Picture Cut
Image clipping tool based on Vue and Typescript. Feature：Scale, flip, rotate, edge check, rectangle clip, ellipse clip. 基于vue和typescript的图片剪裁工具。功能：缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁
Stars: ✭ 49 (-14.04%)
Mutual labels: image
Silicompressor
A powerful, flexible and easy to use Video and Image compression library for Android.
Stars: ✭ 1,081 (+1796.49%)
Mutual labels: image
Image Optimizer
Simple lossless compression for Elementary OS
Stars: ✭ 52 (-8.77%)
Mutual labels: image
Duckduckgo Images Api
DuckDuckGo Image Search Resuts - Programatically download Image Search Results
Stars: ✭ 48 (-15.79%)
Mutual labels: image
Imgviewer
jQuery plugin to zoom and pan images, even those with a size that is a percentage of their container
Stars: ✭ 50 (-12.28%)
Mutual labels: image
Mybox
Easy tools of document, image, file, network, location, color, and media.
Stars: ✭ 45 (-21.05%)
Mutual labels: image
Simpleparallax.js
Simple and tiny JavaScript library that adds parallax animations on any images
Stars: ✭ 1,075 (+1785.96%)
Mutual labels: image
Applicationinimageprocessing
application in image processing or searching
Stars: ✭ 43 (-24.56%)
Mutual labels: image
Image Sequence Streaming
Realtime, non-linear animation playback for interactive pieces.
Stars: ✭ 48 (-15.79%)
Mutual labels: image
Fasterimage
🐎 find the size of an image without downloading the whole file. Supports batch requests.
Stars: ✭ 56 (-1.75%)
Mutual labels: image
Videojs Record
video.js plugin for recording audio/video/image files
Stars: ✭ 1,074 (+1784.21%)
Mutual labels: image
Asciipy
translate images, videos and text to Ascii arts easy
Stars: ✭ 52 (-8.77%)
Mutual labels: image
react-blur-image-loader
Progressive Image Loading for React.
Setup
- Install
npm install react-blur-image-loader react react-dom -S
- Usage
import {render} from 'react-dom';
import BlurImageLoader from 'react-blur-image-loader';
render(<BlurImageLoader src={"picture.jpg"}
preview={"tiny-picture.jpg"}
fullCover={true}
maxBlurLevel={10}
transitionTime={400}/>, document.getElementById("root"));
- Props
| PropName | Type | Default Value | Description |
|---|---|---|---|
src |
string | Null | This field is REQUIRED, it specifies the final image url |
preview |
string | "" | Specifies a preview image url, a preview image should be a tiny optimized image, it will be present until final image loaded, if preview is not defined, a spin loader would be present until final image loaded. |
fullCover |
bool | false | Specifies whether image should cover its parent area or contain inside. |
maxBlurLevel |
number | 10 | Specifies the level of Gaussian blur, refer to stdDeviation. |
transitionTime |
number | 400 | Specifies the transition time from blur to clear, default value is 400ms. |
loader |
React.Element | <DefaultLoader /> | Specifies the preview loader |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].