I'm trying to create a Chrome Extension that changes the way a React app behaves. I want to patch a render function of a specific Component.
I thought that the best way would be to Patch the createElement function of React, and once I detect that the component that I want to change is being created, I will patch its render function with my own rendering.
The problem is that this application was built using webpack, and I don't have access to its React instance...
How can I get the React instance?
Thanks!
Related
I have created one search component using stencil and I'm integrating this stencil codebase with my react application via cdn link. I'm displaying the search component(which was created in stencil) as below in my react codebase :
<custom-search placeholder="Search"></custom-search>
The search component contains a search icon. I need to pass the text in search input field to my react code on click of this icon. How can this be achieved?
Unfortunately I haven't integrate Stencil JS component with React, but passing string data to web component should be working without too much hassle. Do you know if your React app can properly recognize your custom-search component? If not, then you might want to take a look at a link to Stencil JS official document of integrating Stencil JS component to React and make sure component get properly loaded and integrated.
If you know for sure you load the component then not sure why your placeholder is not set within your component - it is just a string after all. Maybe post the custom-search component code, as there might be issue with that (i.e. component lifecycle event you are using might not be doing what you expect to do)
Could you clarify the actual problem, please? :)
Does the component not get rendered, or are you unable to achieve communication from custom-search to the React app?
If the latter is the case, you might want to implement a Custom Event on the Stencil component, to communicate changes back to the consuming app.
As #tomokat mentioned, you should follow the official Stencil React integration docs. This is required, since React cannot handle Custom Events natively, and requires some help from the dev.
Edit: Sorry, I got confused by the first answer. Your title is quite clear, though. If you can show some example code of the component and the React integration, we could probably help in a better way.
How do I use webworkers in a react app ?
I wrote an webworker and tested it in a simple app (html) so it works fine.
But using same approach in a react app doesnt work
I don't want at first use any react-something-webworker, I want just use pure Work api
const _worker = new Worker('./worker')
seems not importing the code inside worker.js file (self.addEventListener("message...)
Thanks for helping
In a React class component you can instantiate a web worker in componentDidMount, define the worker's onmessage and onerror methods, then call worker.terminate() in componentWillUnmount.
In a React function component, replace componentDidMount and componentWillUnmount with useEffect.
Your React component and your worker can then exchange messages with postMessage.
Even if you don't want to use any React-specific libraries, have a look at the code from the react-hooks-worker library. It's less than 100 LOC and it will help you understand how to use the Web Worker API.
I'm working on a prototype for a web app and I chose NextJS because I wanted to learn it better, but I realize I'm not using it in the "standard" way. I started from the Next + Material-UI example here: https://github.com/mui-org/material-ui/tree/master/examples/nextjs and all was good.
But now, I'm trying to persist data using sessionStorage, and I'm finding it difficult to make this work without being able to use the componentDidMount lifecycle event at the page-level. Next's documentation says that projects with a custom _document.js file won't have the componentDidMount method client-side. My project uses a custom document file due to Material-UI. It seems like it's there to support server-side rendering of css-in-js frameworks.
If I don't need server-side rendering, is there a way I can keep Material-UI working, but do away with the custom _document.js file so I can use componentDidMount?
You should be fine using both sessionStorage and a custom document.
componentDidMount (and any other lifecycle method) is not working only for _document.js as this is not rendered client side.
sessionStorage is part of the window so you will be fine using it on any other page/component using the componentDidMount lifecycle.
I'm a newbie for React Native and I don't have native development experience(I only worked on several hybrid apps), while learning this react native framework, I get several questions which block my learning.
How to navigate from one page(component) to another page(component) without relying on navigatorIOS or navigator component? In Hybrid develop mode, it's so easy, just add element A with href attribute would work, but in React Native, how to do it? I read some examples, they all use navigator or navigateIOS component to do it.
Is there any interceptor mechanism in react native so that we could inject some logic before rendering or loading component, for example, we want to have interceptor to check whether user has been login?
How to save data globally (cross components)? In Hybrid mode, we have session, we have local storage, and if we angular JS framework, we could use Service or root Scope to save data, by using react native, how do we save data cross components?
Since I'm new to react native and new to native application development, these questions might be fairly stupid, if anyone could help on this.
I don't know i'm answering to your question but please check this router component for react
https://github.com/rackt/react-router
ComponentWillMount and ComponentDidMount can be used to perform some initial loading
You can use flux framework along with React which can do almost all like in angular js
https://facebook.github.io/flux/
I'm facing some issues when rendering a React component into the shadow DOM of a webcomponent.
I wrote a small piece of code to turn a React component into a webcomponent, but I want to render the
React component inside the shadow DOM of the webcomponent. But in that case, it seems that React is not able to catch UI events (click, keyPress, etc ...) anymore.
Let's take an example, let say that I have a first webcomponent <awesome-timer /> that render the React component inside the webcomponent node, and another webcomponent <less-awesome-timer /> that render the React component inside the shadow DOM of the webcomponent.
Both webcomponents use the same React component. However the one rendered inside the shadow DOM does not work, because click events on the button of the timer component does not trigger the bound function.
I guess React is not designed to handle such case, but I'd love to get more details about it.
The code of the example is available here : https://gist.github.com/mathieuancelin/cca14d31184bf4468bc1
Does anyone have an idea about it ?
I know this is kinda late but, I believe your issue when you pass any attributes to a web component they instantly become strings Because that's all you can pass to a web component. Now of course you can convert or cast them back to there original data type, except functions because once stringified they loose there scoping, lexical and all.
Now to your main question, you are were trying to pass you child element through the Main web components slot. Now you have to remember that once you pass anything to a web component you now have to use the webs components methods and return types to manage whatever you pass. So yes passing react into a web component will not work they you expect.
You will need to go back to whatever tool you use to build your web component and deal with the slot logic there. Since this is a very old post as are web components. You might not have had access to the modern web component build tool's we have today. I found Stenicl allows you to build and manage your web components in Typescript.
A good option is to change your pattern a little bit and just return web components from your react app.
Or you can use another really cool to call Lit-HTML or Lit-element. I believe they may have combined there core libraries. Anyway these tool will allow you to combine Reactjs and web components where lit-html gives you access to methods simial to Reactjs's life cycle methods. Anyway some good stuff to check out if your stuck at this point.