# Hiding sensitive information when the screen loses focus with React

I don't remember what prompted me to think of this, but basically, I was uncomfortable that sometimes people leave their screens unlocked with potentially sensitive information displayed on their screens. As a developer, I set out to think of a solution that could address this.

Although I appreciate that it will most likely not be implemented in a lot of places it did give me an excuse to try something sort of new to me; I had never built a standalone React library, so it was a good excuse to finally do that.

## Enter `react-frostedglass`

You may forgive the corny name. [react-frostedglass](https://github.com/zikani03/react-frostedglass) is a React library that enables developers to hide potentially sensitive information when the window is not in focus.

It uses a Layout Effect to apply a blur to components when the window/tab is not in focus. Of course, this does not apply to all the components automatically, rather you as the user of the library have to wrap your components in a `FrostedContext` provider and use the `"frosted"` variants of common HTML components.

### Example Usage

Let's create a simple react project with Vite to see how the library can be used, first create a Vite project and then install the library using the following commands:

```bash
$ npm create vite@latest app -- --template react

$ cd app

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

Once that is done, replace the `App.jsx` with the following content:

```javascript
import { useState } from 'react'
import { FrostedContext, useFrostedEffect } from '@zikani03/react-frostedglass'
import './App.css'
import Account from './Account'

function App() {
  const focusCheckInterval = 500;
  const [blurSize, isFrosted] = useFrostedEffect(focusCheckInterval, '0.3em')

  return (
    <FrostedContext.Provider value={{ blurSize: blurSize }}>
      <Account />
    </FrostedContext.Provider>
  )
}

export default App
```

As you can see above, we use the `useFrostedEffect` hook and we pass it two parameters, the interval (in milliseconds) to be used to check if the window is in focus and the size of the blur - a valid value for this is anything you can use in the `filter: blur()` CSS property.

Now create a new component in a file named `Account.jsx`. Use the code listed below:

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

export default function Account() {
    const user = {
        email: 'user@example.com',
        phone: '+265-xxx-xxx-xxx',
        address: 'Address 1, City, Country'
    };

    return (
        <div>
            <div className="field">
                <strong>Email</strong>
                <p>
                    <FrostedSpan>{user.email}</FrostedSpan>
                </p>
            </div>

            <div>
                <strong>Phone</strong>
                <FrostedDiv>{user.phone}</FrostedDiv>
                <strong>Address</strong>
                <FrostedDiv>{user.address}</FrostedDiv>
            </div>

            <section {...withFrost({ blurSize: '0.3em' })}>
                Some section that's frosted by default...
            </section>
        </div>
    )
}
```

As you can see above, the Account component uses FrostedDiv, FrostedSpan for the content that we want to blur when the window is out of focus

### Let's see how Frosted components look

We can now run the development server to see how all this looks in action

```bash
$ npm run dev
```

When we focus on the page we will see everything displaying as normal, except the `section` element we set to be blurred by default:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1693150744691/15fa103c-8b7c-4312-b81b-24a2af539eec.png align="center")

Now try opening or focusing on another window and you will observe that the elements become "frosted". How cool is that? 🥶

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1693150800304/5798971a-edce-4a54-81b4-199f0aef8760.png align="center")

## Using the library

As of the time of writing, I have not published a package to NPM. So if you want to use the library you can install the module directly from GitHub using npm

```bash
npm install --save https://github.com/zikani03/react-frostedglass.git
```

## Observations and lessons learned

As mentioned previously, one of my objectives was to learn or at least figure out how to go about creating a standalone React library from scratch. I am glad I was able to accomplish that and here are a few observations:

* Coming up with a nice API/library surface is not always easy, I enjoy creating developer tools and although I have written a [few](https://github.com/creditdatamw/zerocell) [libraries](https://github.com/zikani03/pgadvisorylock) in various languages I was reminded that picking the right abstractions, and naming things (functions, class etc...) requires lots of thought.
    
* I came to appreciate the use of Context Providers and Layout Effect hooks better
    
* I was able to configure Vite for building the library "from scratch", that is without depending on a template repository or some kind of boilerplate.
    
* Related to the point above, I was able to customize the TypeScript compilation options - of course, I had done this before for another [JavaScript library](https://github.com/zikani03/ika/) I built (you should check that out too, by the way!)
    

## Conclusion

In this article, we have seen how you can use `react-frostedglass`, a React library I created, to blur components when the screen loses focus. Although this might not be the most practical approach to the problem, it did allow me to figure out how to publish a standalone React library and appreciate the process of building one.

Thank you for reading.