@bubblydoo/angular-react - npm Package Compare versions

Comparing version 0.0.19 to 0.1.1

lib/angular-wrapper-with-module/angular-wrapper-with-module.d.ts

		@@ -11,3 +11,3 @@ import * as ng from "@angular/core";
		children?: any;
		} & React.RefAttributes<HTMLElement>>;
		} & React.RefAttributes<ng.ComponentRef<any>>>;
		export default _default;

lib/angular-wrapper/angular-wrapper.d.ts

		@@ -0,1 +1,2 @@
		import { type ComponentRef } from '@angular/core';
		import React from 'react';
		@@ -9,3 +10,3 @@ declare const _default: React.ForwardRefExoticComponent<{
		children?: any;
		} & React.RefAttributes<HTMLElement>>;
		} & React.RefAttributes<ComponentRef<any>>>;
		export default _default;

package.json

		{
		"name": "@bubblydoo/angular-react",
		"version": "0.0.19",
		"version": "0.1.1",
		"license": "MIT",
		@@ -5,0 +5,0 @@ "author": "Hans Otto Wirtz <hansottowirtz@gmail.com>",

README.md

		@@ -124,2 +124,37 @@ # React in Angular and Angular in React

		### Refs

		You can get a ref to the Angular component instance as follows:

		```tsx
		import { ComponentRef } from '@angular/core';

		const ref = useRef<ComponentRef<any>>();

		<AngularWrapper ref={ref} />;
		```

		To get a reference to the Angular component's HTML element, use `ref.location.nativeElement`.

		To forward a ref to a React component, you can simply use the props:

		```tsx
		const Message = forwardRef((props, ref) => {
		return <div ref={ref}>{props.message}</div>;
		});

		@Component({
		template: `<react-wrapper [component]="Message" [props]="{ ref, message }">`
		})
		export class MessageComponent {
		Message = Message;

		message = 'hi!';

		ref(div: HTMLElement) {
		div.innerHTML = 'hi from the callback ref!';
		}
		}
		```

		## Developing
		@@ -126,0 +161,0 @@

esm2020/lib/angular-wrapper-with-module/angular-wrapper-with-module.mjs