Skip to content

Conversation

@bengry
Copy link
Contributor

@bengry bengry commented Mar 21, 2019

Addresses #103.

I've open for suggestions on the API etc. to see if there are things that can be improved. The main idea is the keep the Angular-React philosophy as much as possible, while simplifying the wrapping of React components.

Notes

Using this is completely optional (no breaking API changes), at the cost of:

  1. AOT does not work for components wrapped in this way (obviously).
  2. You must use NO_ERRORS_SCHEMA in the NgModule that plans to consume these components. Since these are created at runtime, the Angular compiler can't validate them.
  3. This has only been tested on the basic use-cases of Inputs and Outputs, I haven't tested render props, and I expect them to not work at this time. A future PR could improve upon this.

Usage

call wrapComponent on any React component:

const MyCounterComponent = wrapComponent<CounterProps>({
  ReactComponent: Counter, // <-- type of the component to wrap
  selector: 'my-counter', // <-- selector to use later in the app
  // propNames: ['count', 'onIncrement'], // only needed if propTypes are not defined on `ReactComponent`
});
  1. Add schemas: [NO_ERRORS_SCHEMA] (see notes above for the why).
  2. Use as usual with any other Angular-React wrapper component:
<my-counter [count]="count" (onIncrement)="reactCustomOnIncrement($event)">
  <div style="text-transform: uppercase; color:red">test</div>
</my-counter>

@bengry bengry requested review from omermizr and reshaw March 21, 2019 14:04
@bengry bengry force-pushed the generic-component branch from 82fa8b3 to 2f2fcbc Compare March 21, 2019 14:06
@bengry bengry added the enhancement New feature or request label Mar 21, 2019
@bengry bengry requested review from prjayapa and xjerwa March 22, 2019 17:23
@bengry bengry force-pushed the generic-component branch from 2f2fcbc to b394511 Compare March 22, 2019 21:14
@bengry bengry changed the title Allow wrapping any React component with an Angular one on-the-fly. Allow wrapping any React component with an Angular one on-the-fly Mar 22, 2019
# Conflicts:
#	apps/demo/src/app/app.component.html
#	libs/core/src/lib/components/wrapper-component.ts
#	libs/core/src/public-api.ts
@bengry bengry merged commit 9adf874 into master Mar 30, 2019
@delete-merged-branch delete-merged-branch bot deleted the generic-component branch March 30, 2019 13:27
bengry added a commit that referenced this pull request Mar 30, 2019
bengry added a commit that referenced this pull request Mar 30, 2019
…-fly" (#111)

Reverts #106

Issues with AOT builds including this, reverting until resolved.
@bengry bengry restored the generic-component branch March 30, 2019 14:18
@aarongreenwald aarongreenwald deleted the generic-component branch August 22, 2019 12:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants