React component to blur image backgrounds using canvas.

Last update: Jul 28, 2022

React Blur

styled with prettier

React component for creating blurred backgrounds using canvas.

Live demo

react-blur

Installation

npm install react-blur --save

Usage

var Blur = require('react-blur');

Example

<Blur img='/directory/img.jpg' blurRadius={5} enableStyles>
  The content.
</Blur>

For a complete example see the code in the demo branch.

Props

  • img: The image path.
  • blurRadius: Optional. The size of the blur radius.
  • enableStyles: Optional. Flag to include base styles inline, omit this to easily override.
  • shouldResize: Optional. If the canvas should re-render on resize? Defaults to true.
  • resizeInterval: Optional. How fast the canvas should re-render on resize? Defaults to 128ms.

Contributing

Please install yarn and use it to manage dependencies and the lockfile.

Thanks to Quasimodo for the original stack blur algorithm.

GitHub

https://github.com/javierbyte/react-blur
Comments
  • 1. Why not just use dynamic CSS filters?

    filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: url(#blur);

    http://blog.gospodarets.com/css-filters/?src=http://malyw.github.io https://github.com/Schepp/CSS-Filters-Polyfill http://caniuse.com/#feat=css-filters

    Reviewed by gsans at 2015-03-09 04:44
  • 2. Small issues, cleanup, add onLoadFunction prop for hook into the blur loading

    • Fix gitignore for MAC
    • Fix undeclared vars
    • add onLoadFunction prop for hook into the blur loading.
    • make sure changing src keeps correct blurRadius
    • Do not reload image if the img src prop is relative (because it won't match this.img.src which is absolute)
    Reviewed by iamJoeTaylor at 2016-07-07 22:13
  • 3. Cannot resolve module 'react-addons-pure-render-mixin'

    ERROR in ./~/react-blur/dist/blur.js
    Module not found: Error: Cannot resolve module 'react-addons-pure-render-mixin' in /Users/../node_modules/react-blur/dist
     @ ./~/react-blur/dist/blur.js 9:22-63
    

    I think your component isn't compatible with new versions of React. Can you update it or guide me to fix it ?

    Reviewed by bogas04 at 2016-03-04 17:06
  • 4. make styles inline?

    Seems crazy to have to include a css file for 3 attributes that could be easily inlined

    https://github.com/javierbyte/react-blur/blob/master/src/blur.less

    Reviewed by yocontra at 2016-01-21 20:38
  • 5. componentWillReceiveProps should not re-blur image unless props changed

    Hi javierbyte,

        componentWillReceiveProps(nextProps) {
            stackBlurImage(this.img, this.canvas, nextProps.blurRadius, this.width, this.height);
        },
    

    This is quite a waste, as you don't check if the props actually change. Perhaps this should be done in componentWillUpdate - or just check if the props changed?

    Reviewed by mull at 2015-07-03 09:33
  • 6. Extra code?

    Hi- Might be misreading the code, but it appears that you're always passing blurAlphaChannel->true. Therefore the whole stackBlurCanvasRGB (200+ lines) is never called?

    Reviewed by winkler1 at 2015-03-05 13:35
  • 7. Bump js-yaml from 3.9.0 to 4.1.0

    Bumps js-yaml from 3.9.0 to 4.1.0.

    Changelog

    Sourced from js-yaml's changelog.

    [4.1.0] - 2021-04-15

    Added

    • Types are now exported as yaml.types.XXX.
    • Every type now has options property with original arguments kept as they were (see yaml.types.int.options as an example).

    Changed

    • Schema.extend() now keeps old type order in case of conflicts (e.g. Schema.extend([ a, b, c ]).extend([ b, a, d ]) is now ordered as abcd instead of cbad).

    [4.0.0] - 2021-01-03

    Changed

    • Check migration guide to see details for all breaking changes.
    • Breaking: "unsafe" tags !!js/function, !!js/regexp, !!js/undefined are moved to js-yaml-js-types package.
    • Breaking: removed safe* functions. Use load, loadAll, dump instead which are all now safe by default.
    • yaml.DEFAULT_SAFE_SCHEMA and yaml.DEFAULT_FULL_SCHEMA are removed, use yaml.DEFAULT_SCHEMA instead.
    • yaml.Schema.create(schema, tags) is removed, use schema.extend(tags) instead.
    • !!binary now always mapped to Uint8Array on load.
    • Reduced nesting of /lib folder.
    • Parse numbers according to YAML 1.2 instead of YAML 1.1 (01234 is now decimal, 0o1234 is octal, 1:23 is parsed as string instead of base60).
    • dump() no longer quotes :, [, ], (, ) except when necessary, #470, #557.
    • Line and column in exceptions are now formatted as (X:Y) instead of at line X, column Y (also present in compact format), #332.
    • Code snippet created in exceptions now contains multiple lines with line numbers.
    • dump() now serializes undefined as null in collections and removes keys with undefined in mappings, #571.
    • dump() with skipInvalid=true now serializes invalid items in collections as null.
    • Custom tags starting with ! are now dumped as !tag instead of !<!tag>, #576.
    • Custom tags starting with tag:yaml.org,2002: are now shorthanded using !!, #258.

    Added

    • Added .mjs (es modules) support.
    • Added quotingType and forceQuotes options for dumper to configure string literal style, #290, #529.
    • Added styles: { '!!null': 'empty' } option for dumper (serializes { foo: null } as "foo: "), #570.
    • Added replacer option (similar to option in JSON.stringify), #339.
    • Custom Tag can now handle all tags or multiple tags with the same prefix, #385.

    Fixed

    • Astral characters are no longer encoded by dump(), #587.
    • "duplicate mapping key" exception now points at the correct column, #452.
    • Extra commas in flow collections (e.g. [foo,,bar]) now throw an exception instead of producing null, #321.
    • __proto__ key no longer overrides object prototype, #164.

    ... (truncated)

    Commits
    • 2cef47b 4.1.0 released
    • 810b149 dist rebuild
    • 2b5620e Export built-in types, type override now preserves order
    • ab31bba doc: clarify lineWidth dump options (#612)
    • ee74ce4 4.0.0 released
    • a44bb7c dist rebuild
    • aee620a Throw an error if block sequence/mapping indent contains a tab
    • f0f205b Fix parsing of invalid block mappings
    • e8cf6f6 Fix error with anchor not being assigned to an empty node
    • a583097 Shorthand tags with !! whenever possible
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-11-26 04:26
  • 8. Bump js-yaml from 3.9.0 to 3.14.1

    Bumps js-yaml from 3.9.0 to 3.14.1.

    Changelog

    Sourced from js-yaml's changelog.

    [3.14.1] - 2020-12-07

    Security

    • Fix possible code execution in (already unsafe) .load() (in &anchor).

    [3.14.0] - 2020-05-22

    Changed

    • Support safe/loadAll(input, options) variant of call.
    • CI: drop outdated nodejs versions.
    • Dev deps bump.

    Fixed

    • Quote = in plain scalars #519.
    • Check the node type for !<?> tag in case user manually specifies it.
    • Verify that there are no null-bytes in input.
    • Fix wrong quote position when writing condensed flow, #526.

    [3.13.1] - 2019-04-05

    Security

    • Fix possible code execution in (already unsafe) .load(), #480.

    [3.13.0] - 2019-03-20

    Security

    • Security fix: safeLoad() can hang when arrays with nested refs used as key. Now throws exception for nested arrays. #475.

    [3.12.2] - 2019-02-26

    Fixed

    • Fix noArrayIndent option for root level, #468.

    [3.12.1] - 2019-01-05

    Added

    • Added noArrayIndent option, #432.

    [3.12.0] - 2018-06-02

    Changed

    • Support arrow functions without a block statement, #421.

    [3.11.0] - 2018-03-05

    Added

    • Add arrow functions suport for !!js/function.

    Fixed

    • Fix dump in bin/octal/hex formats for negative integers, #399.

    ... (truncated)

    Commits
    • 37caaad 3.14.1 released
    • 094c0f7 dist rebuild
    • 9586ebe Avoid calling hasOwnProperty of user-controlled objects
    • 34e5072 3.14.0 released
    • 7b25c83 Browser files rebuild
    • 6f73473 Dev deps bump
    • 0c29349 Travis-CI: drop old nodejs versions
    • 10be97e fix(loader): Add support for safe/loadAll(input, options)
    • d6983dd Fix issue #526: wrong quote position writing condensed flow (#527)
    • 93fbf7d fix issue 526 (wrong quote position writing condensed flow)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-21 05:34
  • 9. Bump ini from 1.3.4 to 1.3.8

    Bumps ini from 1.3.4 to 1.3.8.

    Commits
    • a2c5da8 1.3.8
    • af5c6bb Do not use Object.create(null)
    • 8b648a1 don't test where our devdeps don't even work
    • c74c8af 1.3.7
    • 024b8b5 update deps, add linting
    • 032fbaf Use Object.create(null) to avoid default object property hazards
    • 2da9039 1.3.6
    • cfea636 better git push script, before publish instead of after
    • 56d2805 do not allow invalid hazardous string as section name
    • 738eca5 v1.3.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-21 05:34
  • 10. Bump lodash from 4.17.4 to 4.17.21

    Bumps lodash from 4.17.4 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-21 05:34
  • 11. Bump ini from 1.3.4 to 1.3.7

    Bumps ini from 1.3.4 to 1.3.7.

    Commits
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-12-11 03:29
  • 12. Canvas to match Parent width / height

    <div style={width: 900px}>
        <Blur style={{width: "100%"}} img={url}></Blur>
    </div>
    
    <div style={width: 500px}>
        <Blur style={{width: "100%"}} img={url}></Blur>
    </div>
    
    <div style={width: 300px}>
        <Blur style={{width: "100%"}} img={url}></Blur>
    </div>
    
    <div style={width: 100px}>
        <Blur style={{width: "100%"}} img={url}></Blur>
    </div>
    Error:
    StackBlur.js:83 Uncaught Error: unable to access image data: IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.
    Reviewed by Howl0s at 2018-08-24 23:58
Image Sharing Social Media App Built Using React
Image Sharing Social Media App Built Using React

ShareMe Social Media Application Introduction This is a code repository for the

Aug 2, 2022
An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.
An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.

Transl8r About the Project Transl8r is an app designed to connect people and translators to provide fast, effective translations via live chat, video

Mar 26, 2022
A ReactJS to-do-list website with image uploading features integrated with Firebase User Authentication and Firestore Database.
A ReactJS to-do-list website with image uploading features integrated with Firebase User Authentication and Firestore Database.

To Do List App (React) This project is hosted on https://todolist-app.xyz/ A responsive to-do-list website with image uploading features integrated wi

Jan 3, 2022
Augmented reality using React component

React example with MindAR AR project using React and MindAR The react component is inside src/MindARViewer. Everything else are created from create-re

Jun 11, 2021
A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.
A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

Sandpack Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox. Learn more about Sandpack

Aug 1, 2022
A drum machine built with React using the Create React App toolchain.

drum-machine A simple drum machine built with React using the Create React App toolchain. Getting Started Clone or download the repository. Open a com

Dec 30, 2021
Calculator-in-react - Calculator made in React.JS using Hooks as useReducer
Calculator-in-react - Calculator made in React.JS using Hooks as useReducer

Calculator-in-react - Calculator made in React.JS using Hooks as useReducer

Mar 9, 2022
An example using universal client/server routing and data in React with AWS DynamoDB

react-server-routing-example A simple (no compile) example of how to do universal server/browser rendering, routing and data fetching with React and A

Aug 8, 2022
Personal portfolio website of theme Ubuntu 20.04, made using React.js & tailwind CSS

Personal portfolio website of theme Ubuntu 20.04, made using React.js & tailwind CSS

Aug 5, 2022
A set of components using React Aria and Tailwind

React Aria Tailwind A set of components using React Aria and Tailwind. Very early WIP. Why? React Aria is a low level library of React Hooks that help

Jun 21, 2022
React implementation of the service locator pattern using Hooks, Context API, and Inversify.

React Service Locator An implementation of the service locator pattern for React 16.13+ using Hooks, Context API, and Inversify. Features Service cont

Jul 1, 2022
A demo of a Shopify site using Astro and React.

Shopify + Astro + React A demo of a Shopify site using Astro and React. Commands All commands are run from the root of the project, from a terminal: C

Jul 11, 2022
This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

Aug 4, 2022
Tutorial for using react query and supabase

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run

Aug 5, 2022
A real estate website built using React and Redux for State Management
A  real estate website built using React and Redux for State Management

Rea Estate Website This is a website build using react and redux for state management. I used the compound component pattern of react. This website in

Jul 24, 2022
A library that makes using pdfjs in react projects easy.

A library that makes using pdfjs in react projects easy.

Feb 5, 2022
Recreating Windows 11 settings using React JS
Recreating Windows 11 settings using React JS

Recreating Windows 11 settings using React JS

Jul 9, 2022
Here is the place try to learn to call API using React.js with anything your code style and contribute to open-source. Part of Hacktoberfest

Table of Contents About The Project Built With Getting Started Prerequisites Installation Usage About The Project To welcome hacktoberfest we provide

Jul 17, 2022
In this demo, I am using a library created by me, called 'aesthetic-state' for global state managment in React

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Oct 21, 2021