Example: Invoking React Components from Ember

Last update: Jul 29, 2022

Example: Invoking React Components from Ember

This repo contains a runnable demo that shows how to invoke a React component from an Ember app.

Run it

  1. pnpm install
  2. cd app && pnpm run start

Understand it

  • some-react-lib is intended to stand in for your library package that contains a React component.
  • app is the Ember app

Gotchas

  • this example assumes your JSX is in a separate NPM package, so we're importing it via ember-auto-import. If instead you want to make JSX work inside your app's own package, you would need to move @babel/preset-react into the app's own babel config.
  • remember to install ember-modifier. It's not part of the default Ember app blueprint.
  • make sure your app declares its dependency on your library, otherwise ember-auto-import won't be able to import it.
  • It's a good idea for the library to declare a peerDependency on react so that it will definitely share the app's copy.

GitHub

https://github.com/ef4/ember-react-example
You might also like...

Builder.io Headless Page Builder example with Shopify Hydrogen

Builder.io Headless Page Builder example with Shopify Hydrogen

Builder.io + Shopify Hydrogen - headless visual page building example Example repo using Builder.io for drag and drop page building with Shopify hydro

Jul 12, 2022

Solana Wallet Auth: A FullStack example

Solana Wallet Auth: A FullStack example

This example uses Solana's wallet adapter to sign messages and verifies their signatures on the backend, allowing for a lean way to authenticate users without the need for web2 credentials like email/password combinations or social providers, in this scenario all you have to do is connect your wallet and sign interaction messages to be properly authenticated.

Jun 20, 2022

This command line can be used to convert React class components to become functional components

class-to-function This command line can be used to convert React class components to become functional components. Installation Install it as a global

Mar 8, 2022

We have updated our application over to using hooks and functional components to replace any class components we had before.

We have updated our application over to using hooks and functional components to replace any class components we had before.

Crwn hooks We have updated our application over to using hooks and functional components to replace any class components we had before. How to fork an

Feb 10, 2022

📑 A React component to easily create demos of other components

📑 A React component to easily create demos of other components

React DemoTab 📑 A React component to easily create demos of other components Install npm install react-demo-tab Demo DemoTab example Example import R

Jul 18, 2022

React components for implementing UI experiments

react-experiments react-experiments is a set of React components for implementing UI experiments. For additional context behind why we built this, che

Jun 29, 2022

Converts HTML pages into React components

Converts HTML pages into React components

Extract annotated portions of HTML into React components as separate modules. The structure of HTML is preserved by importing child components and rep

Aug 5, 2022

Emoji picker reusable components writed with React 📘, Vue 📗

Emoji picker reusable components writed with React 📘, Vue 📗

Emoji picker component to selected emojis and search by groups. This component is created to work with ReactJs and VueJS.

Dec 2, 2021

A set of components using React Aria and Tailwind

React Aria Tailwind A set of components using React Aria and Tailwind. Very early WIP. Why? React Aria is a low level library of React Hooks that help

Jun 21, 2022
An example using universal client/server routing and data in React with AWS DynamoDB

react-server-routing-example A simple (no compile) example of how to do universal server/browser rendering, routing and data fetching with React and A

Aug 8, 2022
An example of a Kanban Project Board with Ionic React
An example of a Kanban Project Board with Ionic React

An example of a Kanban Project Board with Ionic React

Mar 30, 2022
React Query and Axios example with CRUD operation - GET/POST/PUT/DELETE request with Rest API
React Query and Axios example with CRUD operation - GET/POST/PUT/DELETE request with Rest API

React Query Axios example with Rest API React Client with React Query and Axios to make CRUD requests to Rest API in that: React Query Axios GET reque

Jul 7, 2022
An example project integrating React with three.js

React with three.js example See the demo Created in response to this question on Stack Overflow.

Jul 10, 2022
Simple example of using React Spectrum with the Parcel bundler
Simple example of using React Spectrum with the Parcel bundler

react-spectrum-parcel-starter This is an example repo to show how to integrate R

Dec 22, 2021
A plugin example for writing reactions with the Figma plugin API
A plugin example for writing reactions with the Figma plugin API

?? figma-plugin-example-prototype-write The ability to write protoype interactions in the Figma plugin API has landed! This update allows plugins to c

Feb 28, 2022
Minimum complete reproducible example of the `defaultSource` prop issue

There's an issue when adding a defaultSource prop to the Image component from the react-native library on iOS causes an error. Replication steps Insta

Mar 1, 2022
This is a example for integrating PayHere with ReactJS

PayHere React JS example demo This is a example for integrating PayHere with ReactJS Steps Clone the project npm install How to perform your own React

Nov 24, 2021
Example implementation of how to implement Sign In with Ethereum
Example implementation of how to implement Sign In with Ethereum

Sign in with Ethereum authentication flow A basic example of how to create an authentication flow using Next.js, public key encryption, and an Ethereu

Aug 4, 2022
Zkp-merkle-airdrop-fe-ex - Example of computing proofs for the zkp-merkle-airdrop-contracts sample repo in the browser
Zkp-merkle-airdrop-fe-ex - Example of computing proofs for the zkp-merkle-airdrop-contracts sample repo in the browser

React + NextJS + Webpacking Example of computing proofs for the zkp-merkle-airdr

Jun 8, 2022