React Backdrop Filter

React Backdrop Filter is a quick and easy way to add nice backdrop filters to your app.

Important note

If the css backdrop filter property is not supported by your navigator, the component will fallback to html2canvas by default. To disable this behaviour, remember to set the prop canvasFallback to false.

When using the fallback, the component uses html2canvas. Canvas are slow to calculate and render so it won't do well with animations and movement in the page. It is more recommended to use with static elements or to disable the fallback and add a different background on non supported navigator.

Installation

# Yarn
yarn add react-backdrop-filter

# NPM
npm install react-backdrop-filter

Usage

import BackdropFilter from "react-backdrop-filter";

render() {
    return (
        <div className="container">
            <BackdropFilter
                className="bluredForm"
                filter={"blur(10px) sepia(50%)"}
                canvasFallback={true}
                html2canvasOpts={{
                    allowTaint: true
                }}
                onDraw={() => {
                    console.log("Rendered !");
                }}
                >
                <form>
                    <div className="profilePic">
                    <img src={drwho} alt="me" />
                    </div>
                    <h4>@tnargib</h4>
                    <p>Login</p>
                    <hr />
                    <p>Password</p>
                    <hr />
                    <div className="button">Sign in</div>
                    <small>Forgot password ?</small>
                </form>
            </BackdropFilter>
        </div>
    );
}

Configuration

prop name	type	mandatory	default value	description
filter	string	NO	""
className	string	NO	""
canvasFallback	function, boolean	NO	true	Set it to false if you don't want the component to fallback on html2canvas
shouldDraw	function, boolean	NO	true	Called every time the canvas is about to rerender. Should return true or false if it should continue or not
onDraw	function	NO	null	Function called when canvas is rendered
html2canvasOpts	object	NO	{}	html2canvas configuration options
logging	boolean	NO	true	Display or not the logs from react-backdrop-filter and html2canvas

Example of adding a different background on non supported navigators

@supports not (
  (backdrop-filter: blur(5px)) and (-webkit-backdrop-filter: blur(5px))
) {
  .bluredForm {
    background: rgba(255, 255, 255, 0.3);
  }
}