DEV Community: Sinan Mp

New NPM package to add customizable avatar system for react project

Sinan Mp — Thu, 21 May 2026 09:20:31 +0000

Sinan Mp

May 21

Building a Customizable Avatar System in React (Without Creating Everything From Scratch)

#react #npm #javascript #ui

Comments

4 min read

Building a Customizable Avatar System in React (Without Creating Everything From Scratch)

Sinan Mp — Thu, 21 May 2026 09:19:31 +0000

Most modern web applications have some kind of:

login system
user profile
onboarding flow
account settings page

And almost all of them expect users to upload a profile picture.

But while building one of my own projects, I started thinking about something:

What about users who don’t want to upload their real photo?

Some users care about privacy.
Some just prefer fun digital identities.
Some don’t like sharing personal images online.

That’s exactly why customizable avatars are becoming more common across modern products.

You can already see this trend in:

Discord
Reddit
gaming platforms
AI applications
community products
learning platforms

So I decided to add avatar customization to my React project.

And that’s where the real problem started.

The Problem With Avatar Customization in React

At first, it sounded simple.

I thought:

I’ll just add a small avatar generator.

But once I started building the actual feature, I realized avatar systems are surprisingly complex.

You don’t just need avatar rendering.

You also need:

a customization UI
live preview updates
configurable avatar parts
randomize/reset support
save logic
reusable components
theme compatibility
modal handling
responsive layouts
state management
scalability for future updates

And after all of that…

You still need to make it feel polished and production-ready.

Existing Solutions Weren’t Enough

I explored a few avatar libraries and generators.

One of the best rendering libraries I found was react-nice-avatar.

It’s great for rendering avatars and generating configurations.

But there was still one issue:

There still wasn’t a clean plug-and-play developer experience for building a full avatar customization system.

Most of the work still had to be done manually.

So instead of solving the problem only for my own project, I decided to turn the solution into a reusable package.

Introducing React Avatar Studio

I built React Avatar Studio — a lightweight and highly configurable React package for avatar customization.

The package is built on top of react-nice-avatar, but the architecture was intentionally designed to avoid being too tightly coupled long-term.

The goal was to create something that is:

scalable
reusable
customizable
theme-friendly
lightweight
TypeScript-first

What React Avatar Studio Includes

Live Avatar Preview
As users customize the avatar, the preview updates instantly.

This makes the experience feel much more interactive and polished.

Avatar Customization
The package currently supports:

Hair
Eyes
Nose
Mouth
Outfit
Colors
Avatar styles

This gives users enough flexibility to create unique avatars without overwhelming the UI.

Randomize & Reset
One small feature that surprisingly improves UX a lot.

Users can:

generate random avatars
reset back to default

This makes experimentation much more fun.

Modal + Inline Support
The package supports:

modal-based customizers
inline customizers

So developers can integrate it however they want.

One Thing I Focused on Heavily: Flexibility

One of the biggest mistakes UI packages make is becoming too opinionated.

I didn’t want this package to feel locked into:

one design system
one theme
one styling approach
one project structure

So I focused heavily on customization support.

The package was designed to work well with:

Tailwind CSS
MUI
custom design systems
dark mode
light mode

The goal was:

Make it easy to align with the project’s existing UI.

The Technical Architecture

This was probably the most interesting part of building the package.

Even though the package currently uses react-nice-avatar internally, I didn’t want the entire codebase tightly coupled to it.

So instead of building everything directly around one renderer, I started designing the package more like a reusable system.

The architecture focuses on:

reusable components
configurable sections
scalable APIs
future extensibility
engine abstraction possibilities

This makes future improvements much easier.

Why I Think Avatar Systems Will Become More Common

I genuinely think customizable avatars will become a standard feature in many modern applications.

Especially in:

AI products
social platforms
gaming apps
communities
developer tools
Web3 products
education platforms

Users increasingly want:

privacy
personalization
digital identity flexibility

And avatars solve that really well.

Example Usage

import { AvatarCustomizerModal } from "react-avatar-studio";

function App() {
  return (
    <AvatarCustomizerModal
      open={true}
      onSave={(config) => {
        console.log(config);
      }}
    />
  );
}

Future Plans

This is still just the beginning.

Some features I’m already exploring:

more avatar engines
headless mode
improved accessibility
better animation support
more avatar styles
presets
deeper customization APIs

Final Thoughts

This package started from a very simple frustration I faced while building one of my own projects.

But after working on it, I realized many React developers probably face the same issue.

So instead of building a one-time internal solution, I decided to turn it into a reusable package for the community.

If you’re building a React application and want customizable avatars without building the entire system from scratch, I hope React Avatar Studio helps.

Links
npm: https://www.npmjs.com/package/react-avatar-studio
GitHub: https://github.com/Sinan0333/react-avatar-studio
Documentation: http://react-avatar-studio.sinan-dev.in

Would love to hear feedback, ideas, or feature suggestions from other React developers 🚀

Complete Chrome Extension Tutorial (Manifest V3): Build & Publish a Real Extension

Sinan Mp — Fri, 27 Feb 2026 08:42:10 +0000

We fill forms every day.

Signups.
Checkout pages.
Job applications.
Contact forms.

And every time, we type:

Name
Email
Phone number
Address

Over and over again.

So I built a Chrome extension called TypeLess to solve exactly that.

This post isn’t just about the idea—I'll walk you through how it actually works under the hood, what I learned, and the technical challenges I faced.

The Core Idea

The concept is simple:

Save your personal details once → Autofill forms anywhere with one click.

No backend.
No accounts.
No external APIs.

Everything runs locally inside the browser.

But implementing that required understanding how Chrome extensions really work.

Understanding Chrome Extension Architecture (Manifest V3)

A Chrome extension isn’t a normal web app.

It has multiple isolated environments:

Popup – The UI when you click the extension icon
Background Service Worker – Runs in the background and handles events
Content Script – Injected into web pages
Options Page – Full settings page Each environment runs separately and communicates using message passing.

This separation is powerful—but it changes how you structure logic.

How TypeLess Is Structured

Here’s the simplified architecture:

User Action (Shortcut / Click)
        ↓
Background Service Worker
        ↓
Send Message to Active Tab
        ↓
Content Script
        ↓
Detect & Fill Form Fields

1️⃣ Storing User Data

User data (name, email, phone, etc.) is stored using:

chrome.storage.local.set({ userData: formValues });

Why chrome.storage.local?

It’s asynchronous
It’s extension-scoped
Data never leaves the browser

One thing to note: unlike localStorage, Chrome storage is async, so you must handle it properly:

chrome.storage.local.get("userData", (result) => {
  const data = result.userData;
});

If you forget the async nature, things break quickly.

2️⃣ Triggering Autofill

I added keyboard shortcuts using the chrome.commands API:

chrome.commands.onCommand.addListener((command) => {
  if (command === "autofill_form") {
    // Send message to active tab
  }
});

The background service worker listens for this event and sends a message to the active tab:

chrome.tabs.sendMessage(tabId, { action: "FILL_FORM" });

3️⃣ The Hard Part: Detecting Form Fields

This is where things get interesting.

Forms are inconsistent across websites.

You’ll see inputs like:

<input name="email" />
<input id="user_email" />
<input placeholder="Enter your email" />

Some frameworks:

Don’t use traditional labels
Wrap inputs in custom components
Manage state internally (React, Vue)

So I built multiple detection strategies:

Match by name
Match by id
Match by placeholder
Check associated
Fuzzy matching

Example approach:

const inputs = document.querySelectorAll("input, textarea");

inputs.forEach((input) => {
  const fieldName = input.name || input.id || input.placeholder;

  if (fieldName?.toLowerCase().includes("email")) {
    input.value = userData.email;

    // Trigger proper event for React/Vue forms
    input.dispatchEvent(new Event("input", { bubbles: true }));
  }
});

Important: React Forms

Just setting input.value isn’t enough for React apps.

You must dispatch the input event so React updates its internal state.

This was one of the biggest “aha” moments during debugging.

Content Security Policy (CSP) Gotcha

Chrome extensions have strict CSP rules.

No inline scripts
No inline event handlers

So things like this won’t work:

<button onclick="fillForm()">Fill</button>

Instead, you must attach event listeners in JS files.

This forced me to structure code more cleanly—which was actually a good thing.

Injection Limitations

Extensions cannot run on:

chrome:// pages
Chrome Web Store pages

Also, permissions must be clearly defined in manifest.json.

For example:

"permissions": [
  "storage",
  "activeTab",
  "scripting",
  "commands"
]

If permissions don’t match usage, the extension won’t work — or worse, it won’t pass review.

Why I Didn’t Use a Backend

I intentionally avoided:

Remote databases
Analytics tracking
User accounts

Everything is local.

This simplified:

Architecture
Privacy compliance
Chrome Web Store approval

Sometimes less infrastructure = better product.

What I Learned Building TypeLess

Here are some practical takeaways if you're thinking about building a Chrome extension:

1️⃣ Think in Isolated Contexts

Popup ≠ Background ≠ Content Script.

2️⃣ Chrome APIs Are Event-Driven

Everything revolves around listeners and messaging.

3️⃣ Modern Forms Are Tricky

React/Vue require event dispatching.

4️⃣ Async Storage Changes Logic Flow

Don’t assume synchronous reads.

5️⃣ Small Tools Still Require Good Architecture

Even “simple” ideas can get complex quickly.

What’s Next

I’m currently experimenting with:

AI-based smart field inference
Auto-splitting full name into first/last
Generating age from DOB
Optional cross-device sync

But the core philosophy stays the same:

Keep it lightweight.
Keep it private.
Keep it useful.

If you’ve been thinking about building a Chrome extension — I highly recommend trying it.

It forces you to understand the browser at a deeper level.

And you might end up solving a problem you personally face every day.

If you have questions about Chrome extension development, feel free to ask. 👇

https://chromewebstore.google.com/detail/lhcafeinbeaaingfhamcdpgnmafnpoic?utm_source=item-share-cb

Building Dynamic Skeleton Loaders in React the Easy Way

Sinan Mp — Mon, 29 Sep 2025 06:19:58 +0000

Loading states are everywhere—from profile cards to dashboards. Skeleton loaders keep users engaged while data is being fetched, but writing custom skeletons for every component quickly becomes repetitive.

That’s where dynamic skeleton loading in React can help—automatic, reusable, and clean.

🎯 Why Skeleton Loading Matters

✅ Improves perceived performance — users see immediate feedback instead of a blank screen.
✅ Keeps layouts consistent while waiting for data.
✅ Provides a more polished and professional UX.

Instead of designing one-off static skeletons for every button, card, or image, we’ll build a smart wrapper that handles it automatically.

⚡ Installation

npm install react-skeletonify
# or
yarn add react-skeletonify

Add the styles once:

import "react-skeletonify/dist/index.css";

🔥 Quick Start Example

Let’s build a simple ProfileCard component to see how effortless it is

import React from "react";
import { SkeletonWrapper } from "react-skeletonify";
import "react-skeletonify/dist/index.css";

function ProfileCard({ loading }) {
  return (
    <SkeletonWrapper loading={loading}>
      <div style={{ width: "300px", padding: "16px", border: "1px solid #eee" }}>
        <img
          src="/profile.jpg"
          alt="Profile"
          style={{ width: "60px", height: "60px", borderRadius: "50%" }}
        />
        <h3>Jane Doe</h3>
        <p>Frontend Developer</p>
      </div>
    </SkeletonWrapper>
  );
}

👉 When loading={true}, you’ll see animated placeholders.
👉 When loading={false}, the real content is displayed.
No extra skeleton markup needed!

🎨 Global Configuration with SkeletonProvider

Want consistent skeleton styles across your app? Use the provider:

import { SkeletonProvider } from "react-skeletonify";

<SkeletonProvider
  config={{
    animation: "animation-1",
    borderRadius: "8px",
    animationSpeed: 2,
  }}
>
  <App />
</SkeletonProvider>

Now every skeleton inside will use these defaults.

⚙️ Customization Options

You can fine-tune skeletons at both global and component levels.

Key	Description	Default
animationSpeed	Speed of animation	`1.5`
background	Background color	`#eee`
border	Border style	`none`
borderRadius	Border radius	`4px`
textTagsMargin	Margin for text tags	`0.5em`
className	Custom class	`-`
style	Inline styles	`-`
animation	Animation type	`animation-1`
exceptTags	Excluded HTML tags	`[]`
exceptTagGroups	Excluded tag groups	`[]`

📦 Example with Excluded Tags

<SkeletonWrapper
  loading={true}
  overrideConfig={{
    exceptTags: ["img", "button"],
  }}
>
  <div>
    <img src="/profile.jpg" alt="Profile" />
    <h2>Hello World</h2>
    <button>Click me</button>
  </div>
</SkeletonWrapper>

👉 The img and button are rendered normally, while the rest gets skeletonized.

🚀 Real-World Use Case

Think of an e-commerce product page:

Product image → excluded (so users still see thumbnails quickly)
Title + description → skeletonized dynamically
Add to Cart button → excluded for immediate interaction
Profile pages → show avatar immediately, skeletonize bio + stats.

This keeps the page interactive and avoids “dead” UIs.

🧩 Why Developers Love It

Simple: Just wrap, no extra markup.
Flexible: Global and local configs.
Clean: Avoids bloated codebases full of static skeletons.
Reusable: Works on any component.

Instead of reinventing skeletons for each widget, you spend more time building real features.

❓ FAQ: Dynamic Skeleton Loading in React

Q: Do I need to design skeletons manually for each component?
No. With React Skeletonify, skeletons are generated automatically based on your component’s structure.

Q: Can I exclude certain elements like images or buttons?
Yes—just use the exceptTags or exceptTagGroups config.

Q: Can I use it with any CSS framework (like Tailwind or MUI)?
Yes — React Skeletonify is framework-agnostic. You can style skeletons with plain CSS, Tailwind, or even MUI’s styled system.

📌 Conclusion

Skeleton loaders don’t need to be repetitive or messy. With React Skeletonify, you can ship polished loading states in minutes, not hours.

👉 Try it here: React Skeletonify on npm

With React Skeletonify, you’ll spend less time coding placeholders and more time building features. Cleaner code, faster shipping, happier users.