react-migration-toolkit

A set of tools facilitating the migration of Ember components to React components:

• Ember to React bridge component
• React providers
• React hooks
• React components

Usage

The main component brought by this addon is the ReactBridge Ember component.

It renders React components within Ember templates, permitting progressive UI migration and preserving existing logics and tests.

Full documentation can be found here (Qonto VPN must be on).

This branch uses the ReactBridge extensively and can be checked for reference.

Basic Example

To inject a React component in Ember:

// app/react/components/example.tsx

export function Example({ userName }: ExampleProps) {
  return <h1>Hello {userName}!</h1>;
}

// app/components/my-ember-component.js

import Component from '@glimmer/component';
import { Example } from 'app/react/components/example.tsx';

export default class MyComponent extends Component {
  reactExample = Example;
}

{{! app/components/my-ember-component.hbs }}

<ReactBridge
  @reactComponent={{this.reactExample}}
  @props={{hash userName='John'}}
/>

More examples can be found in the documentation

• 📕 How to pass custom context providers
• 📕 How to use internationalization
• 📕 How to use routing
• 📕 How to use Ember services
• 📕 How to use feature flags with LaunchDarkly
• 📕 How to test React components in Ember

Installation

ember install react-migration-toolkit

Compatibility

• Ember.js v4.12 or above
• Embroider or ember-auto-import v2

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.