package size badge npm version github action build status

SafeView is a component that allows you to hide sensitive information in your app visually, for presentation purposes, and more.


with NPM:

npm install safeview

with Yarn:

yarn add safeview


A basic example of using the base component, all you need to do is import and then wrap your app with it.

import SafeView from 'safeview';

const App = () => {
  return (
            // Your React App

Specify which element you would like to hide with the property data-safe="true".

const MyComponent = () => {
    return (
            <span data-safe>
                // Sensitive info

After you mark the chosen elements you can press Shift + S on Chrome or Alt + Shift + S on Firefox to hide the elements.



The <SafeView> component is the main element of the library and where you control all the functionality besides which element to hide.

// SafeView has the following properties

interface SafeViewProps {
  // Determines which the key will toggle the "SafeMode".
  accessKey?: React.HTMLAttributes<HTMLButtonElement>['accessKey']; // string

  // Allows you to insert a class to the div <SafeView> creates.
  className?: string;

Targeting elements to hide

In order to specify to SafeView which element you would like to hide, you need to target it with the property data-safe="true".

<p data-safe>{ sensitive information }</p>


SafeView is freely distributable under the terms of the MIT license.


View Github