Some used them together?
Maybe there is a component for the PruneCluster?
It will be great to see some examples/tutorials....
Download the prunecluster from npm.
Copy it to your local js directory.
add the line
exports.PruneCluster = PruneCluster;
Then start using it :
var P = require('../Lib/PruneCluster');
this.clusterGroup = new P.PruneClusterForLeaflet();
The author don't have plans to make it React compatible. https://github.com/SINTEF-9012/PruneCluster/issues/102
EDIT:
PruneCluster should use as it is in the official documentation.
The problem is, leaflet is mounted as react component.
The better answer is to expose leaflet map object from the react component.
This way you can use prunecluster as it is.
The example above is bad, see this Example which shows how to access leaflet map, which is half the solution.
From there, just use Prunecluster as normal JS and create layers that you then add to leaflet map object that you got from my example.
I would suggest trying this React component
https://yuzhva.github.io/react-leaflet-markercluster
Those React component have similar functionality with PruneCluster.
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 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.
I want to move a big Ember v1.4.0 app to React. Instead of creating a new UI from scratch. I want to start building it in React my converting pages over slowly, essentially mixing React and Ember pages in one website.
Goal:
The above is my ultimate goal, but my first goal is is to create a single page in React that is called by Ember's router.
What I have tried so far: I wanted to create a React component in a ./templates/myFirstTestPage.handlebars because, as I understand it, the router.js calls a template file. But I am unsuccessful creating a React component in the handlebars file. Firstly, I cannot use <script> to import React because <script> does not work in handlebars. Secondly, I believe the handlebars is parsing the React app in an incorrect way. Actually, I don't really understand how, and in what order, these frameworks do the rendering.
Possible solutions (but I need implementation details):
Somehow create a React component in the template folder with the .handlebars extension.
Refer to the url of a React app in the handlebars of an Ember app
Have the Ember router map the url to a jsx file. This solution seems really viable to me. I think to myself that surely the creators of Ember must have thought that people might want to have their Ember app refer to some regular html file. Hence, I hope someone might have some knowledge whether this is possible or not.
Somehow create my own router that maps urls to particular files. If its a React component, then I'd map it to my jsx file, if not, I let Ember's router take care of the mapping. I don't really know how to implement a url mapping thing though.
I made simple React component with some images that I want to animate as they are shown in viewport. To use getboundingclientrect() method I have to pass an element so I used js querySelectorAll('img') in componentDidMount() where my scrollEventListener is. It doesn't feel like the right way to go (although works fine). Is there more 'Reactish' solve for that problem?
Yes, you need to use Refs.
With React, usually you shouldn't have to use native dom selectors. By using refs it stays in the React scope and you'll have a more robust workflow.
if react-dom is specifically geared for rendering html elements and react-native renders native views...
Lets say I have an xml type language and I want to use react / jsx to declaratively compose components that have there own native elements.
How do I create base elements (not divs or spans but something else)
How can I get a react component to run its lifecycle method without using ReactDom.render
any resources out there that I can study?
Thanks in advance
You can checkout the tutorial by Nitin Tulswani on writing a custom react renderer.