Issue
I created a custom element in React using reactToWebComponent. In a simple HTML file, I use it as follows
<body>
<custom-tag></custom-tag>
<script src="http://localhost:3000/static/js/bundle.js"></script>
</body>
Everything is working fine and it displays the component from <custom-tag>.
However, when I use it in another React app, I got an error saying
Property 'custom-tag' does not exist on type 'JSX.IntrinsicElements'.
So I resort to doing the following and it works
React.createElement('custom-tag', {...props})
When I use it in an Angular app, I got an error saying
'custom-tag' is not a known element
How to properly use a custom element in Angular? For React, is there another way that I don't need to use React.createElement instead use the tag <custom-tag> directly?
Solution
After researching, I was able to do it as follows:
For react, we need to add this code inside react-app-env.d.ts
declare namespace JSX {
interface IntrinsicElements {
"custom-tag": {
prop1: string;
prop2: string;
...
};
}
}
For angular, we need to update app.module.ts and add the custom element schema:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
@NgModule({
...
schemas: [CUSTOM_ELEMENTS_SCHEMA],
...
})
Then for both react and angular app, we can simply use it as <custom-tag prop1="val1" ...></custom-tag>
Answered By - iPhoneJavaDev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.