On a React app, a client needs to customize some pages for some specific needs.
Is it possible to inject some custom JS / React component and "override" the behavior of an other component?
I don't want to keep the custom component on the bundle all the time and do some control because other clients may customize other features as well ...
Basically, I'm trying to inject a custom JS with a custom component inside and use it.
Anyone had to do samething like this?
In my company we had kind of the same problem and it can get very messy. You can use window.eval() if you import an external js code to make it run in your project but I would not recommend it at all as it gave us a lot of headaches...
That would be for JS code which are instructions and not components.
If your client has their own components maybe you can suggest them to create a node library so you can import their comps.
Related
As the title suggests I am looking for a way to precompile a single or set of normal react components to plain html/js so I can inject this into my webview.
Since I am open to any solution I will give you some background on what I am trying to achieve. We are building a react native app and need to use Leafleft maps by customer requirement. Since Leaflet is not available for react native straight away we are looking for a way to implement it. Currently we are looking at compiling the leaflet react code to normal html/js and inject this into a webview. If there are other/ better ways by all means suggest them!
Thanks for your time 😄
I want to create a react based theme engine for NextJS, in summary, the user can upload a set of .js files that contains React components, and I want to inject them inside my app on some specific parts.
The question is: It is possible to compile react component and inject them in my app after build and at runtime?
I also open to suggestions, still looking for an alternative of this.
How can i create Header project in react and want to share the same to other projects without npm?
Is there any way I can share script and selector like <Header></Header> and they can use the same?
I have tried so many things but cann't able to share with other projects.
Maybe you are talking about reusing Header component in some other project. I suggest you to take a look at Storybook . You can simply add that same component inside the new application and then use it there.
Let's consider react application with Tiny.MCE component. I need to create a custom plugin. But I would like to create this component as a React component.
I have no idea how could I inject the react component to my plugin. Any idea?
TinyMCE plugins have a specific format for how the JavaScript has to be created/bundled. A React component won't fulfill that requirement.
The process for creating a TinyMCE plugin is documented here:
https://www.tiny.cloud/docs/advanced/creating-a-plugin/
I would recommend placing your custom plugins in their own directory and using the external_plugins option to load them. This will keep your custom code separate from the editor and avoid things being deleted/overwritten if you update TinyMCE itself.
Noob Question: Is the intention of the cSS API to make it possible to use the components as normal HTML without the need for any additional React code? Does the usage of only the CSS API therefore require the inclusion of the React JS package or can the Blueprint JS package alone work ?
As an author of Blueprint, I can confirm that it is in fact possible to use some of the Blueprint components via CSS only. Components that describe a CSS API in the documentation can be used without React, but usually with caveats (the biggest being that you must write the markup correctly). The CSS API is presented as an alternative to the JavaScript (React) API, and CSS modifiers are supported by the JS APIs through the className prop.
As Blueprint is a React-based UI toolkit, the best experience will be had by using React, primarily because you no longer have to write the markup correctly.
It is not possible to use the components as normal HTML, without ReactJS. Blueprint is a ReactJS UI toolkit for the web.
Their pre-made (React) components are customizable via a JavaScript API or a CSS API (or both).
The idea behind the CSS API, that some of the components have, is to provide additional options for style customization.
Let's use an example. See the Menu component. Its CSS API allows us to modify Menu's style. One example is that we can add icons to menu items, read in their docs:
Add icons to menu items the same way you would to buttons: simply add the appropriate pt-icon-<name> class*.
PS: I'd recommend you to head over the ReactJS docs, understand how ReactJS components work, get deeper knowledge about the core ReactJS concepts (or complete a fundamentals course) and only then - try to implement BlueprintJS.