https://github.com/poulet42/ember-x-react
Render React components inside your ember templates
https://github.com/poulet42/ember-x-react
ember ember-addon embroider react
Last synced: 3 months ago
JSON representation
Render React components inside your ember templates
- Host: GitHub
- URL: https://github.com/poulet42/ember-x-react
- Owner: poulet42
- License: mit
- Created: 2025-01-26T14:36:39.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-27T08:55:21.000Z (4 months ago)
- Last Synced: 2025-02-28T12:13:51.741Z (3 months ago)
- Topics: ember, ember-addon, embroider, react
- Language: JavaScript
- Homepage:
- Size: 604 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-x-react
Render React components inside your ember templates:
```handlebars
{{t 'my-form.first-name'}}
{{t 'my-form.submit'}}
```
## Features
✅ Supports nested React components and composition
✅ Supports React Context
✅ Low runtime footprint: XReact components are transformed into react components at **build time** !
✅ Use ember and react features together: Conditional components in a `{{#if}}` block, pass `@tracked` properties in props
✅ Supports DOM elements as children
✅ Props type safety in the template
## Limitations
❌ You cannot use the `yield` keyword inside a `XReact` component
❌ You cannot have ember components inside `XReact` components
## Compatibility
- Ember.js v4.12 or above
- Embroider or ember-auto-import v2
## Installation
```
ember install ember-x-react
```
## Setup
### Add the babel plugin in your config:
Most of the transformation logic is made at build time via a babel plugin; Add the plugin in your ember-cli-build.js configuration:
```javascript
new EmberApp(defaults, {
babel: {
plugins: [
// ...
require('ember-x-react').buildBabelPlugin(),
],
},
});
```
or directly in your Babel config file if you enabled `useBabelConfig: true`
### Update your bundler configuration to handle JSX:
if your app is using embroider with webpack, you need to tell webpack how to handle JSX:
```javascript
rules: [
// ...
{
test: /\.jsx/, // replace or add tsx if you use typescript
use: {
loader: 'babel-loader',
options: {
presets: [
// Add other presets here if you need Typescript support for example
['@babel/preset-react', { runtime: 'automatic' }],
],
},
},
},
];
```
## Usage
### Simple usage
```gjs
import XReactRoot from 'ember-x-react/components/x-react/root';
import XReact from 'ember-x-react/components/x-react';
import MyButton from './my-button.tsx';
export default class MyForm extends Component {
...
get isFormPending() {
return this.submitTask.isPending;
}
{{#if this.isFormPending}}
Submitting ...
{{else}}
Submit
{{/if}}
}
```
### What about context providers ?
The components passed to XReact can be any valid React components, this means you can just do:
```gjs
```
### Usage with HBS templates
Create a backing component class for your HBS template, then add the React component as a property of this class:
```js
import { MyButton } from './my-button.tsx';
export default MyEmberComponent extends Component {
myReactButton = MyButton;
}
```
Then, you can render your react component by referencing the class property:
```handlebars
```
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).