{"_id":"@anandaroop/react-blurred-pii","_rev":"2-4ed757a76a2cf2dd3022da84642b71bd","name":"@anandaroop/react-blurred-pii","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.1":{"name":"@anandaroop/react-blurred-pii","version":"0.1.1","description":"Blur UI elements containing PII, for screenshots and screencaps","main":"dist","author":{"name":"@anandaroop"},"license":"MIT","devDependencies":{"@commitlint/cli":"^12.1.4","@commitlint/config-conventional":"^12.1.4","@types/jest":"^26.0.23","@types/react":">=16.8.0","@types/react-dom":">=16.8.0","@typescript-eslint/eslint-plugin":"^4.24.0","@typescript-eslint/parser":"^4.24.0","eslint":"^7.26.0","eslint-config-prettier":"^8.3.0","eslint-plugin-react":"^7.23.2","husky":">=6","jest":"^26.6.3","lint-staged":">=10","np":"^7.5.0","prettier":"2.3.0","react":">=16.8.0","react-dom":">=16.8.0","ts-jest":"^26.5.6","typescript":"^4.2.4"},"scripts":{"clean":"rm -rf dist/*","compile":"tsc","watch":"tsc --watch","type-check":"tsc --noEmit","lint":"eslint \"src/**/*.{ts,tsx}\"","prepare":"husky install","test":"jest","prepublishOnly":"yarn clean && yarn compile","release":"np"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_id":"@anandaroop/react-blurred-pii@0.1.1","dist":{"shasum":"1198058ed4e78e9db7ace56e7b190dfd3ef67bbb","integrity":"sha512-L39hSo30hreySc4Syx1BUkw/6YYApOZQ+kIw6Skr4D2Vz6t3Rp1xTt4a2Z+9m9GKonSD9LEH2g+t0ehjVBIa5g==","tarball":"https://registry.npmjs.org/@anandaroop/react-blurred-pii/-/react-blurred-pii-0.1.1.tgz","fileCount":24,"unpackedSize":16100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpxpPCRA9TVsSAnZWagAAwfcQAINJ9uUaNaXMSJ5RZBj4\naDSRA8Ua4cuWHvqL8gDJcBJE8A6s9sXZZX4Ekh3RWMViIKwfCNNBjvOhwTWx\nUhzTYnxYiJ/0vIAMl4uz0Ty1LlskBkB93ECTilCt9VuJbzvJbglG0iDOiUHO\nJFNNKTKeYmZPKNr3uqNgKakLYHJB5izAqDl25v8HPJuOSa/mNnXhA8ldvoM/\nlNmH6RmfThjS9IHeDdZHGBllpyMoM6nfBTQU7d/koNXswLbdUdV3fHdejGRP\nQI9Y1WQCn25SgjV9FPbukpR3h+tZb2yxNikWTkK7xqWfxZxKzju8Dz2GlcGq\nLm1jiFjxKTMoWNa5c0OMVb8Uvrcxe+B7GfJVrCY9pkeevDOC0SOLShP5CJqi\n+aAzX5TFvQ0j0ea1G3nYO0S2vTrIZZZQvx7Etlr1P5kmp8Sz2t/Qxda75XwJ\nlc2veeFmttPNewo5x83W7Mcga1LW4nQIQBs7sJ77bWDufmJQOJLG0D9RAhDY\nSyszQsqPinYUgdgiSOo10X9Czl5uktQf3rqBi2Q3sc7ucufl92FFudUHgeZ+\nnz7cPkJ8DJfOZEJH4FWxO5Z3/0WHzIsy4AhvydiGyQMKqYGHzeRgQAzZHdN8\nOWDf17gkBaWFNbsR4r8yNgk+0slVq1AWK3GZricG92XGWSL8wpRrnwmsbrPn\noBu6\r\n=hphP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDWDNA+cA7LQmm9Ci9QoRnkHb1VWdjKUBNiyCZV4vU4wIgWlpvndvaskG6vuAvQIzNTg3vY5lelQpx1hvQJjtfYHI="}]},"_npmUser":{"name":"anandaroop","email":"anandaroop.roy+npm@gmail.com"},"directories":{},"maintainers":[{"name":"anandaroop","email":"anandaroop.roy+npm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-blurred-pii_0.1.1_1621563983353_0.3350975942724448"},"_hasShrinkwrap":false},"0.1.2":{"name":"@anandaroop/react-blurred-pii","version":"0.1.2","description":"Blur UI elements containing PII, for screenshots and screencaps","main":"dist","author":{"name":"@anandaroop"},"license":"MIT","devDependencies":{"@commitlint/cli":"^12.1.4","@commitlint/config-conventional":"^12.1.4","@types/jest":"^26.0.23","@types/react":">=16.8.0","@types/react-dom":">=16.8.0","@typescript-eslint/eslint-plugin":"^4.24.0","@typescript-eslint/parser":"^4.24.0","eslint":"^7.26.0","eslint-config-prettier":"^8.3.0","eslint-plugin-react":"^7.23.2","husky":">=6","jest":"^26.6.3","lint-staged":">=10","np":"^7.5.0","prettier":"2.3.0","react":">=16.8.0","react-dom":">=16.8.0","ts-jest":"^26.5.6","typescript":"^4.2.4"},"scripts":{"clean":"rm -rf dist/*","compile":"tsc","watch":"tsc --watch","type-check":"tsc --noEmit","lint":"eslint \"src/**/*.{ts,tsx}\"","prepare":"husky install","test":"jest","prepublishOnly":"yarn clean && yarn compile","release":"np"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_id":"@anandaroop/react-blurred-pii@0.1.2","dist":{"shasum":"1c849dfdfcd18256289186234cb8a0d65faadffb","integrity":"sha512-YZ/RP59GyrEDhD4eh/AqmjiFTOnHq06/wgy79wJvVqOBfWw66tBssbFmZuggmmukdxkrfqE/NeqG3qHo4CuFPw==","tarball":"https://registry.npmjs.org/@anandaroop/react-blurred-pii/-/react-blurred-pii-0.1.2.tgz","fileCount":24,"unpackedSize":16070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpxx+CRA9TVsSAnZWagAA3+EP/RYQP+ANn6fTBSAMP8Xy\nao99Z647hRYV3JpE+Jw+Zou2KxCT7l3RJ3FG9sWsSNc3wQjBX5ZkDfUfqHR0\nbxXU2NsdgbOtwyAd/K0ZtUfGpSRkaWOsB6CYxX25njgDB/6WD+w4EM/RLL3N\nt8FxQnOretI43/xwwvkUXMjTe2OaUR5fdEAIE0QmQCpq3B8z/OdO9XEQRfN9\n8g705YNQyiGk9nP9n6luJVwzDVl/w6nTXuN/z6xB24bAmt43wyYNvhQWJ6GD\nz41boO/lvnBr5kCwsV+9LiyDgqqPwycwwCaHPdpQJIN/soV1527ZCJ1MLhr0\nj+paQkuGgMZx0hcSDVgEbMe2wt7dwxQCSDUzh5rKZiCQiokNSJ+hqER2sNsH\nPeci7aipbzplrYCttxYgMc5AfLoPlpSF4a9EknxJ4FQPByMuduqJ6V5YHDMS\n6fMgCHXaP8TVn96ySgkr3tHqV0tbO2AqfYcjDKX7/rRdZCWUQhS+HDosnwmD\nUg7FFPw/ma7z7FuY2MHvhWbMVHqmG13/IltnZEx75tQViHXSTkxRhh0JxeRe\n1Mau47hQyTJkQCefO5NyptUfeYGOPbu4mGgPeu7nhGuwty0lGHdyMpEkYeT1\nbYhS3SYVFZcqVHtZVypue5XwB+F8Avn6Q2oXdSa8DN60DOzFb59AtVUWtlV3\nnOhv\r\n=DKHO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDm8sXXGTh7rXInuBj7gVoQPmw4AfjrkDAqhIbBxEZdcwIgXpOrVby7F9rF+sp3CCsv/HuzKXrTxtkBR9IEIeGYGeg="}]},"_npmUser":{"name":"anandaroop","email":"anandaroop.roy+npm@gmail.com"},"directories":{},"maintainers":[{"name":"anandaroop","email":"anandaroop.roy+npm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-blurred-pii_0.1.2_1621564541815_0.5196376139781582"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-21T02:26:23.296Z","0.1.1":"2021-05-21T02:26:23.516Z","modified":"2022-04-04T13:55:13.291Z","0.1.2":"2021-05-21T02:35:42.013Z"},"maintainers":[{"name":"anandaroop","email":"anandaroop.roy+npm@gmail.com"}],"description":"Blur UI elements containing PII, for screenshots and screencaps","author":{"name":"@anandaroop"},"license":"MIT","readme":"# react-blurred-pii\n\nThis libary provides React components that can be used for protecting personally identifying information (PII) in screenshots and screencaps. It does so by blurring them with pure CSS techniques.\n\n<img src=\"https://user-images.githubusercontent.com/140521/119067134-629ffe80-b9af-11eb-84dd-da16ae54a7f1.gif\" />\n\nNote that the resulting UI is is thus safe to document visually, but _**not**_ safe to share with untrusted users, since all PII remains in the markup itself.\n\nIf that meets your needs, using it is simple.\n\n## Installation\n\nInstall, e.g. with Yarn:\n\n```\nyarn add @anandaroop/react-blurred-pii\n```\n\n## Basic usage\n\nConsider this simple app:\n\n```jsx\nconst Demo = () => {\n  return (\n    <MyApp>\n      <MyComponent>Name: {fullName}</MyComponent>\n    </MyApp>\n  )\n}\n```\n\nThe first step is to wrap your app (or some component tree) in a `BlurredPIIProvider` and toggle the `shouldBlur` flag to `true` or `false`, as needed.\n\n```diff\n+import { BlurredPIIProvider } from \"@anandaroop/react-blurred-pii\"\n\n export const Demo = () => {\n   return (\n+    <BlurredPIIProvider shouldBlur={true}>\n       <MyApp>\n         <MyComponent>Name: {fullName}</MyComponent>\n       </MyApp>\n+    </BlurredPIIProvider>\n   )\n }\n```\n\nOnce wrapped, any descendant `PII` component will follow suit by blurring or un-blurring accordingly.\n\n```diff\n-import { BlurredPIIProvider } from \"@anandaroop/react-blurred-pii\"\n+import { BlurredPIIProvider, PII } from \"@anandaroop/react-blurred-pii\"\n\n export const Demo = () => {\n   return (\n     <BlurredPIIProvider shouldBlur={true}>\n       <MyApp>\n-        <MyComponent>Name: {fullName}</MyComponent>\n+        <MyComponent>Name: <PII>{fullName}</PII></MyComponent>\n       </MyApp>\n     </BlurredPIIProvider>\n   )\n```\n\nThe final result:\n\n```jsx\nimport { BlurredPIIProvider, PII } from \"@anandaroop/react-blurred-pii\"\n\nexport const Demo = () => {\n  return (\n    <BlurredPIIProvider shouldBlur={true}>\n      <MyApp>\n        <MyComponent>Name: <PII>{fullName}</PII></MyComponent>\n      </MyApp>\n    </BlurredPIIProvider>\n  )\n}\n```\n\n---\n\n## `PII` Options\n\n`PII` has sensible defaults for blurring short snippets of typical body text, but is customizable as well.\n\n#### `as: string`\n\n`PII` will render a `span` by default, but you can choose any other HTML element:\n\n```js\n<MyComponent>\n  Name: <PII as=\"pre\">{fullName}</PII>\n</MyComponent>\n```\n\n#### `color: string`\n\n`PII` assumes black text, but can generate a blur in any other color as well.\n\n```js\n<MyComponent>\n  Name: <PII color=\"red\">{fullName}</PII>\n</MyComponent>\n```\n\n#### `blurAmount: number`\n\n`PII` generates an 8px blur by default, adequate for typical body text. But it can be customized for larger text sizes.\n\n```js\n<MyComponent>\n  Name: <PII blurAmount={20}>{fullName}</PII>\n</MyComponent>\n```\n\n#### `additionalCSS: object`\n\nIf you need additional inline styles other than what `PII` generates, you can provide those as well.\n\n```js\n<MyComponent>\n  Name: <PII additionalCSS={{\n    lineHeight: \"2em\",\n    letterSpacing: \"0.5em\",\n  }}>{fullName}</PII>\n</MyComponent>\n```\n\n\n","readmeFilename":"README.md"}