https://github.com/zikani03/react-frostedglass

Blur components when window is not in focus.
https://github.com/zikani03/react-frostedglass

Last synced: 21 days ago
JSON representation

Blur components when window is not in focus.

• Host: GitHub
• URL: https://github.com/zikani03/react-frostedglass
• Owner: zikani03
• Created: 2023-07-06T13:51:49.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-02T21:33:43.000Z (over 1 year ago)
• Last Synced: 2023-08-02T22:44:38.609Z (over 1 year ago)
• Language: TypeScript
• Homepage:
• Size: 68.4 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
react-frostedglass

==================

A React utility library to blur stuff immediately or after some time.

## Why??

The first reason is that I wanted to make a standalone React library, even if it's useless. ;)

The other more (sort of) convincing reason  is to enable you to temporarily hide sensitive information on your components.

_Imagine the user of your app suddenly turns from their desk and is now chatting with a co-worker. Their screen hasn't locked and now anyone passing behind them or staring at the screen can see all the information they are viewing on a customer. What if we could thwart this invasive nosey person by blurring parts of the screen when the window is not focused._

> NOTE: This is still a Work In Progress and not production-ready and I have only tested it on a toy project, if you are serious about using this - send PRs am sure there are better ways and missing things.

## Usage

Install from GitHub via npm (not yet on npm repos, srry):

```sh

$ npm install https://github.com/zikani03/react-frostedglass

```

First step is to add a context provider to wrap your components so that standard config can be shared across child nodes:

```jsx

import {FrostedContext, useFrostedEffect} '@zikani03/react-frostedglass'

function App() {

    const focusCheckInterval = 10_000;

    const [blurSize, isFrosted] = useFrostedEffect(focusCheckInterval, '0.3em')

    return (

        

            

        

    )

}

```

Second step is to use one of the built in "Frosted" versions of some DOM elements, currently only `div` via `FrostedDiv`, `label` via `FrostedLabel`, `span` via `FrostedSpan`.  Incase you want to apply the frost effect on a an element that's not built in you can use the `withFrost()` function

```jsx

import {FrostedSpan, FrostedDiv, FrostedLabel, withFrost} '@zikani03/react-frostedglass'

function Account() {

    const user = {

        email: '[email protected]',

        phone: '+265-xxx-xxx-xxx',

        addres: 'Address 1, City, Country'

    };

    return (

        


            


                Email

                {user.emai}

            


            

                
{user.phone}

                
{user.address}

            


            

                Some section that's frosted by default...

            

        

    )

}

```