Pixelate Images and HTML Element in React
2 min readMar 15, 2021
The Story
One day I get a weird requirement from my manage that is pixelating the user personal information shown in our website .
You might say “Yo. why don’t you just simply blur the text”. Requirement is requirement, the design is making it look like ‘pixelated’ not ‘blurred’ and we might need to pixelate entire div block not only text. Therefore, I do some researches and could not find any library for it.I only found react-pixelify which pixelate image only writing in JS.
React-pixelate library
Inspired by react-pixelify, I create React Pixelate Lib providing 2 components:
- ImagePixelated, the TS version of react-pixelify’s Pixelify component, which pixelate the image with some customisation options such as image with, height, pixel size, centerd, and background color for transparent background image.
- ElementPixelated is a component which pixelate html element.
Usage
It’s easy to install and use.
- Installation
Using npm:
npm install react-pixelateOR using yarn:
yarn add react-pixelate
- Use components
Demo
Give a star if react-pixelate a star if you find it’s fun and helpful to you.
Happy Coding!
