Skip to content

ng-react-bridge is a lightweight Angular package that enables seamless integration of React components into Angular applications. It uses a directive to render React components, allowing dynamic prop passing and compatibility with standalone Angular components. This tool is ideal for hybrid projects needing both frameworks.

License

Notifications You must be signed in to change notification settings

john310897/ng-react-bridge

Repository files navigation

ng-react-bridge

NPM version NODE version types license

ng-react-bridge is a lightweight Angular package designed to bridge React and Angular. It enables developers to seamlessly render React components inside Angular components using a directive, simplifying the integration of both frameworks in hybrid applications.

  • Demo (You could find the demo code in the project repo)

Compatability

  • ✅ Compatible with Angular 20 and React 17+
  • ⚠️ Built and tested with Angular 20

Features

  • Render React components within Angular templates.
  • Pass props dynamically from Angular to React components.
  • Lightweight and easy-to-use directive.
  • Fully compatible with Angular standalone components.

🔧 API

Below are the supported parameters:

Property Type Description
reactComponent React.ComponentType The React component to render inside the Angular context.
props Record<string, any> An object containing props to pass to the React component.

Prerequisites

To use ng-react-bridge, ensure your project has the following dependencies installed:

  • React (react)
  • ReactDOM (react-dom)
  • Babel (for compiling and running React components in Angular)

Install them if they are not already present in your project:

npm install react react-dom @types/react @babel/preset-react

And also you need to update tsconfig.json file so it can recognize the react imports and compile JS

//tsconfig.json
{
    ...
    "compilerOptions":{
        ...
        "jsx": "react",
     }
}

Installation

Install the package via npm:

npm install ng-react-bridge

Usage Example

//test-component.tsx
import * as React from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import Paper from '@mui/material/Paper';

const columns: GridColDef[] = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'firstName', headerName: 'First name', width: 130 },
    { field: 'lastName', headerName: 'Last name', width: 130 },
    {
        field: 'age',
        headerName: 'Age',
        type: 'number',
        width: 90,
    },
    {
        field: 'fullName',
        headerName: 'Full name',
        description: 'This column has a value getter and is not sortable.',
        sortable: false,
        width: 160,
        valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
    },
];

const paginationModel = { page: 0, pageSize: 5 };
type componentProps = {
    data: any
}
export default function TestComponent(props: componentProps) {
    React.useEffect(() => {
        console.log('react component loaded')
    })
    return (
        <Paper sx={{ height: 400, width: '100%' }}>
            <h5>MUI Data table</h5>
            <DataGrid
                rows={props?.data}
                columns={columns}
                initialState={{ pagination: { paginationModel } }}
                pageSizeOptions={[5, 10]}
                checkboxSelection
                sx={{ border: 0 }}
            />
        </Paper>
    );
}
//app.ts
import { Component } from '@angular/core';
import { ReactComponentDirective } from 'ng-react-bridge';
import TestComponent from '../react_components/test-component'

@Component({
  selector: 'app-root',
  imports: [ReactComponentDirective],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App {
  protected title = 'angular-test-pkg';
  component = TestComponent
  angularLabel = "Parent"
  tableData = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }
  ]
}
<!-- app.html-->
<div>
  Angular Component {{angularLabel}}
</div>

<br />
<div>
  React as child component
  <div [reactComponent]="component" [props]="{data:tableData}">
  </div>
</div>

Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Submit a pull request with detailed changes.

License

This project is licensed under the MIT License.

About

ng-react-bridge is a lightweight Angular package that enables seamless integration of React components into Angular applications. It uses a directive to render React components, allowing dynamic prop passing and compatibility with standalone Angular components. This tool is ideal for hybrid projects needing both frameworks.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published