Forem: Selvi Parasakthi K

How to Use React Components Inside Angular (Step-by-Step Guide)

Selvi Parasakthi K — Tue, 31 Mar 2026 08:10:42 +0000

In real-world projects, teams often work with multiple frameworks like React and Angular.

But what if you already built a component in React and want to reuse it inside an Angular application?

👉 Do you need to rewrite everything?
👉 Or is there a smarter way?

Good news: You can directly use React components inside Angular using Web Components.

In this blog, I’ll walk you through a step-by-step process with clear explanations, so even if you try this for the first time, it will work.

🧠 Understanding the Idea First

Before jumping into code, let’s understand what we are doing.

React components are not directly compatible with Angular because:

React uses a Virtual DOM
Angular uses its own template system

So they don’t “talk” to each other natively.

💡 Solution: Web Components

Web Components are browser-native custom HTML elements.

Example:

<random-picker></random-picker>

Once we convert a React component into a Web Component:

Angular treats it like a normal HTML tag
No framework conflict
Fully reusable

🛠 Step 1: Create a React Project

We’ll first build our React component separately.

npm create vite@latest random-picker
cd random-picker
npm install

👉 Why Vite?

Fast build tool
Simple configuration
Perfect for creating reusable components

📦 Step 2: Install r2wc

We use a library to convert React → Web Component.

npm install @r2wc/react-to-web-component

👉 Why this library?

Normally, converting React into a Web Component requires a lot of manual work.

This package:

Wraps your React component
Handles lifecycle
Maps props automatically

⚛️ Step 3: Create a Simple React Component

Now let’s create a clean and minimal component (no CSS, so beginners can focus on logic).

// src/components/RandomPicker.tsx

import { useState } from "react";

type Props = {
  items?: string[];
  title?: string;
  onResult?: (value: string) => void;
};

export default function RandomPicker({
  items = [],
  title = "Pick one",
  onResult,
}: Props) {
  const [result, setResult] = useState("");

  // Function to pick a random item
  const pick = () => {
    if (!items.length) return;

    const randomItem =
      items[Math.floor(Math.random() * items.length)];

    setResult(randomItem);

    // send result back (optional)
    onResult?.(randomItem);
  };

  return (
    <div>
      <h3>{title}</h3>
      <button onClick={pick}>Pick Random</button>
      {result && <p>Result: {result}</p>}
    </div>
  );
}

🧩 What’s happening here?

items → list of values
title → heading
onResult → callback function
pick() → selects a random item

This is just a normal React component.

🔁 Step 4: Convert React to Web Component

Now comes the important part - converting your React component into something Angular can understand.

// src/random-picker-wc.ts

import r2wc from "@r2wc/react-to-web-component";
import RandomPicker from "./components/RandomPicker";

const RandomPickerWC = r2wc(RandomPicker, {
  props: {
    items: "json",
    title: "string",
    onResult: "function",
  },
});

// Register as HTML element
customElements.define("random-picker", RandomPickerWC);

🔍 Deep Explanation

📌 React → Angular Compatibility Problem

React and Angular are built on completely different architectures:

React uses a Virtual DOM
Angular uses template-driven rendering

Because of this difference, Angular cannot directly render a React component.
To make them work together, we need a framework-independent layer — this is where Web Components come in.

📌 Role of `r2wc()`

The r2wc function acts as a bridge between React and the browser.

It wraps your React component
Converts it into a native Custom Element
Handles mounting, updating, and unmounting internally

After this conversion, your React component behaves like a normal HTML tag.

👉 In simple terms:

React Component → Web Component → Usable in Angular

📌 Why We Define `props`

Web Components don’t receive JavaScript props like React.
They receive HTML attributes, which are always strings.

So we must explicitly define how each prop should be interpreted.

props: {
  items: "json",
  title: "string",
  onResult: "function",
}

📌 Understanding Each Prop Type

json
- Used when passing arrays or objects
- Converts string → actual JavaScript data
- Example: "['Apple','Mango']" → ["Apple","Mango"]
string
- Used for simple text values
- Passed directly without transformation
function
- Used for callbacks/events
- Enables communication from React → Angular

📌 Role of `customElements.define()`

customElements.define("random-picker", RandomPickerWC);

This step registers your component in the browser.

After registration:

<random-picker> becomes a valid HTML element
It can be used anywhere (Angular, HTML, etc.)

Without this step:

The browser will not recognize your component
Nothing will render

Now the browser understands this element.

⚡ Step 5: Build React Project (Using vite)

Instead of doing a normal build, we configure Vite to generate a reusable Web Component bundle.

🧩 Create Vite Config

// vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: "src/random-picker-wc.ts",
      name: "RandomPicker",
      fileName: "random-picker",
      formats: ["es"],
    },
    cssCodeSplit: false,
  },
});

npm run build

This generates a file inside the dist folder:

dist/random-picker.js

👉 This file contains your Web Component ready to use in Angular.

🅰️ Step 6: Setup Angular Project

ng new angular-app
cd angular-app

🔗 Step 7: Load React Script in Angular

Open angular.json

Add your React build file:

"scripts": [
  "src/assets/random-picker.js"
]

Make sure you copy random-picker.js from the React dist folder into Angular src/assets/

👉 Why this step?

Angular doesn’t know about your React component.
So we manually load the script globally.

⚠️ Step 8: Enable Custom Elements in Angular

Angular throws an error for unknown HTML tags.

To fix that:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {}

👉 Why?

This tells Angular:

“Don’t complain about unknown elements — I know what I’m doing.”

🧩 Step 9: Use React Component in Angular

Now you can use your React Web Component just like a normal HTML element in Angular.

<random-picker
  title="Fruits Picker"
  [attr.items]="'[\"Apple\",\"Mango\",\"Orange\"]'"
></random-picker>

🎉 Final Result

Now your Angular app renders a React component 🎯

React logic runs inside
Angular displays it
Both work together seamlessly

🧾 Summary (What You Learned)

React and Angular are not directly compatible
Web Components act as a bridge
r2wc simplifies conversion
Angular can consume custom elements easily

🔥 When Should You Use This?

This approach is perfect when:

You want to reuse React components
Multiple teams use different frameworks
You are building a shared component library

⚠️ Common Mistakes

❌ Forgetting CUSTOM_ELEMENTS_SCHEMA
❌ Not adding script in angular.json
❌ Passing objects instead of JSON string

🙌 Final Thoughts

This technique is extremely powerful.

Once you understand this pattern, you can:
👉 Use React components inside Angular applications
👉 Reuse UI across different projects and frameworks
👉 Build framework-independent UI libraries

If this helped you, feel free to ❤️ and share!

Happy coding 🚀

How to Use Styled Components in React with Dynamic Props (Beginner Friendly Guide)

Selvi Parasakthi K — Sun, 22 Feb 2026 15:05:16 +0000

When building modern React applications, styling plays a major role in making the UI dynamic and reusable.

Instead of writing separate CSS files, Styled Components allows us to write actual CSS inside JavaScript and also apply styles dynamically using props.

In this blog, let's learn

What is styled-components
How to install styled-components
How styled-components work
How to pass dynamic props
How to style UI based on props like
- Background color
- Text Color
- Border Radius
- Image
- Shape
- Shadow

1. What is styled-component

Styled Components is a CSS-in-JS library that allows developers to write CSS directly inside JavaScript. It helps in creating reusable styled UI components while also enabling dynamic styling through props.

By using Styled Components, we can avoid class name conflicts and maintain a clean, component-based styling approach within our React applications.

2. Install Styled Components Package

First, install the required packages:

npm install styled-components
npm install --save-dev @types/styled-components

3. How styled-component work

Example:

import styled from "styled-components";

export const Title = styled.h1`
  color: blue;
`;

Now Title becomes a styled React component which we can use like:

<Title>Hello World</Title>

4. Dynamic Styling Using Props

The real power of styled-components comes when we pass props.
We can change the UI dynamically based on user input or state values.

5. Creating a Dynamic Card Component

Let’s create a profile card where:

Background color is dynamic
Text color is dynamic
Border radius is dynamic
Shadow is toggleable

Step 1: Create Styled Card

export const Card = styled.div<{
  bg: string;
  textColor: string;
  radius: number;
  shadow: boolean;
}>`
  width: 300px;
  padding: 20px;
  text-align: center;

  background: ${({ bg }) => bg};
  color: ${({ textColor }) => textColor};
  border-radius: ${({ radius }) => radius}px;

  transition: 0.3s;

  ${({ shadow }) =>
    shadow &&
    `
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  `}
`;

Passing Image as Background
Instead of using an <img/> tag, we can also apply image dynamically as a background.

Step 2: Create Avatar Component

export const Avatar = styled.div<{
  shape: string;
  image: string;
}>`
  width: 100px;
  height: 100px;

  border-radius: ${({ shape }) =>
    shape === "circle" ? "50%" : "12px"};

  background: url(${props => props.image})
    center/cover no-repeat;
`;

Here:

image→ Dynamic image URL
shape → Circle or square avatar

Using Styled Components in React
Now let’s pass these props from our React component.

Step 3: Profile Card Component

type Props = {
  name: string;
  role: string;
  bg: string;
  textColor: string;
  radius: number;
  shadow: boolean;
  shape: string;
  image: string;
};

export default function ProfileCard(props: Props) {
  return (
    <Card
      bg={props.bg}
      textColor={props.textColor}
      radius={props.radius}
      shadow={props.shadow}
    >
      <Avatar
        shape={props.shape}
        image={props.image}
      />

      <h2>{props.name}</h2>
      <p>{props.role}</p>
    </Card>
  );
}

Passing Values from State
We can now control the styles dynamically using React state.

<ProfileCard
  name="John Doe"
  role="Frontend Developer"
  bg="#ffffff"
  textColor="#000000"
  radius={12}
  shadow={true}
  shape="circle"
  image="https://i.pravatar.cc/100"
/>

Now:

Changing bg will change background color
Changing textColor will update text
Changing radius will update card shape
Changing shape will update avatar
Changing image will update avatar background All UI updates dynamically ✨

🚀 Conclusion

Styled Components helps us:

Keep styling close to components
Create reusable UI
Apply styles dynamically
Build interactive UI easily
Maintain clean code structure Using props, we can control the complete UI styling from React state without writing separate CSS files.

🚀Understanding Webpack: A begineer friendly Guide with Examples

Selvi Parasakthi K — Sat, 15 Nov 2025 09:19:02 +0000

Webpack is one of the most powerful tools in modern JavaScript development. If you're building a front-end application, you've almost certainly seen it in action—even if you didn't notice it.

This blog breaks down what Webpack does, why it matters, and how to set up a basic Webpack configuration with loaders, CSS/SASS support, and JS minification.

What is Webpack?

Webpack is a static module bundler for modern JavaScript applications.
When Webpack processes your application, it creates an internal dependency graph starting from one or more entry points—then bundles all modules (JS, CSS, images, etc.) into one or more optimized files.

In simple words:

✅ Webpack bundles your project's files (JS, CSS, images…)
into fewer, optimized files so your application loads faster.

Sample Project Setup

Reference repository:
👉https://github.com/Selvi-Parasakthi-K/webpack-practice

1. Initialize the Project

Create a package.json file:

npm init -y

Install Webpack and Webpack CLI:

npm i webpack webpack-cli --save-dev

Add "build": "webpack" in the scripts section, so running npm run build will trigger Webpack.

"scripts": {
  "build": "webpack"
}

2. Create webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
  },
  mode: "none",
};

This tells webpack:

entry → starting file of your app
output → where to store bundled files
mode → can be "development", "production", or "none"

Loaders in Webpack

Loaders allow Webpack to handle non-JavaScript files like images, CSS, and SASS.

Think of loaders as translators—Webpack doesn’t understand images or CSS by default, so loaders help convert them into modules.

Image Loader Example

Install file-loader:

npm i file-loader --save-dev

Add loader rule:

module: {
  rules: [
    {
      test: /\.(jfif|png)$/,
      use: ["file-loader"],
    },
  ],
}

Setting the Public Path

Public path tells Webpack where the final bundled files (like images) will be loaded from in the browser. It basically sets the base URL for all assets so the browser knows the correct location to fetch them.

output: {
  filename: "bundle.js",
  path: path.resolve(__dirname, "./dist"),
  publicPath: "./dist/",
},

This ensures images get the correct URL in the final bundle.

Adding CSS Support

Install these loaders:

css-loader → lets Webpack understand CSS files
style-loader → injects CSS into the browser

Order matters → loaders run from right to left

{
  test: /\.css$/,
  use: ["style-loader", "css-loader"], 
}

If reversed, Webpack will fail.

Adding SASS/SCSS Support

Install:

npm i sass sass-loader style-loader css-loader --save-dev

Add the rule:

{
  test: /\.scss$/,
  use: [
    "style-loader",
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        implementation: require("sass"),
      },
    },
  ],
}

Plugins in Webpack

Plugins in Webpack allow you to perform extra tasks during the build process—like optimizing, minifying, or transforming files—that go beyond what loaders can do.

Minifying JavaScript (Production Optimization)

Use terser-webpack-plugin to minify JS.