How to use d3 component in react without breaking its animation - javascript

I was trying out d3 sunburst component from here. I wanted to use it in react. To use it in react, we have to use another library called react-kapsule:
import SunburstChart from "sunburst-chart";
import fromKapsule from "react-kapsule";
const ReactSunburst = fromKapsule(SunburstChart, {
methodNames: ["onClick"]
});
<ReactSunburst
width={200}
height={200}
label="name"
size="size"
data={flare}
onClick={(entry) => {
console.log("Hello from inside onClick handler!!");
}}
/>
It renders as follows:
The problem is with specifying custom onClick handler. When I specify methodNames: ["onClick"], clicking on slice of sunburst chart zooms in that slice, but it does not log the message to the console. codesandbox link
If I remove onClick from methodNames, it logs the message to method names, but it does not zooms in the slice. codesandbox link
How I add working onClick handler while at the same time ensuring that the component's default behavior wont break?

Related

OnClick for mapbox Layer

I am using react-map-gl to add a map to my React app. I want to add an onClick event to my Layer component, but it looks like react-map-gl does not support it. (docs here: https://visgl.github.io/react-map-gl/docs/api-reference/layer )
I've recently discovered that react-mapbox-gl does support onClick events for Layer components, but I am having trouble installing it through npm (tree dependency issues).
I was wondering if anyone here has managed to add the onClick event using react-map-gl? Any advice?
Example code below:
import React from "react";
import { Layer, LayerProps } from "react-map-gl";
export const MapLayer: React.FunctionComponent<LayerProps> = ({
id,
type,
paint,
source,
layout,
}) => {
return (
<Layer id={id} type={type} paint={paint} source={source} layout={layout} />
);
};
Thanks,
Robert
In fact, react-map-gl would definitely support onClick event.
However, the event is not designed to respond to each individual layer, instead it comes under the default Map component. You will need to specify the interactiveLayerIds property to make it work on specific layers.
Please refer to the section of onClick event from react-map-gl documentation.

Is there a way to show a React Component code into a <code> tag?

I'm building a tester page where the user sees a library component and documents its use.
Here is the component:
render = () => {
let component = (
<Slider
onSlide={this.handleSlide}
totalCount={120}
/>
);
return (
<div>
<h2>Slider Test:</h2>
{component}
<code>HOW TO PRINT COMPONENT CODE HERE?</code>
</div>
);
};
I want to show the component in use and at the end the code I've used to test it.
How can I put on screen the component code without the need to replicate it inside the tag?
Is there a way to do it directly or though an existing npm library?
You could escape the code and it should appear correctly.
You can use that library to do it escape-html npm
You should also be able to find specialized libraries to do it like this one react code view npm

How can I make a SVG element clickable on React?

I am using React Native with Expo and I have 4 SVG elements that I need them to be clickable. This is the code for each of these:
<Svg.G
id="Passangers-Going-B"
onPress={() => console.log(`${cardinalPoint} Avatar Was Clicked`)}
>
...
With that code I am able to click on the SVG element but the weird thing is that when I try to click on another element the click is still firing the event of the last element I clicked on.
I recorded a video with the behavior
So, is there a better way to do this? All I need is to click on those SVG elements in order to change to a new route.
Any ideas?
I am using SVG from expo. import { Svg } from 'expo'; -> https://docs.expo.io/versions/latest/sdk/svg/
I also created a Snack but I don't see it is working at all -> https://snack.expo.io/#maketroli/expo.svg-example?session_id=snack-session-_9YKofW2Y
What I see is that if I click on one of the elements the click gets stuck there because if I click a new element it throws the function of the last clicked element. I have to click around 3 times the new element in order to focus the click on that element.
I saw something about PanResponder but I don't know this has something to do with it.
You should wrap your SVG into a Component that aims only to handle the Press event.
import { TouchableOpacity } from "react-native"
<TouchableOpacity onPress={() => console.log(`${cardinalPoint} Avatar Was Clicked`)}>
<Svg.G
id="Passangers-Going-B"
/>
</TouchableOpacity>
You will need to style it appropriatly.

Why does React warn against an contentEditable component having children managed by React?

I get the following warning when rendering my component:
Warning: A component is contentEditable and contains children
managed by React. It is now your responsibility to guarantee that none
of those nodes are unexpectedly modified or duplicated. This is
probably not intentional.
This is my component:
import React, { Component } from "react";
export default class Editable extends Component {
render() {
return (
<div contentEditable={true} onBlur={this.props.handleBlur}>
{this.props.children}
</div>
);
}
}
What is the potential problem with my code that React wants to warn me about? I did not quite understand from reading the documentation at https://reactjs.org/docs/dom-elements.html.
I imagine that my component should work exactly like an managed input field, without any problem:
this.props.children is initial value
the onBlur callback updates the props from event.target.innerHTML
the component is rendered with the new props
Setting the contenteditable html attribute allows the contents of that element to be modified in the browser. React is warning you that you have children within that element that are managed by React. React only works from the top down. Meaning it manages a model at the top level and maintains a virtual DOM representing that data, then renders the DOM tree based on that virtual DOM. Any changes you make to the DOM outside of React (such as setting contenteditable and allowing the content to be edited by a user directly in the browser) will be potentially blown away or cause problems for React when it goes to update those managed elements.
In your situation you don't care that the {this.props.children} node gets blown away because you know you're catching the changes and doing what you need to with it. It's just warning you that you better not expect that node to remain intact and accurately updated by React when you're letting the content be edited by the browser directly.
If you know what you're doing (and for now it looks like you do) then you can suppress that warning by adding suppressContentEditableWarning={true}.
Thanks #Chev! It fixed the warnings..
<p
className={editing ? 'editing' : ''}
onClick={editOnClick ? this.toggleEdit : undefined}
contentEditable={editing}
ref={(domNode) => {
this.domElm = domNode;
}}
onBlur={this.save}
onKeyDown={this.handleKeyDown}
{...this.props}
suppressContentEditableWarning={true}
>
{this.props.value}
</p>

Modify NavigationBar on route change

I can't find any documentation for how this should be done with the <Navigator/> component... Basically, when one of my scenes loads, I want to be able to, say, pass a route.navBarColor to my navigator that will automatically change the background color of the bar.
I have tried pushing a route with {navBarColor: 'red'}, etc... to renderScene(), but this does not work because renderScene() doesn't seem to have a reference to this, and when I bind(this) it, the entire scene does not render, and throws a Stack Overflow error.
Basically, I want to do something like this:
navigator.push({name: 'TestScene', navBarColor: 'transparent'})
Which then goes to
renderScene(route, navigator) {
if(route.navBarColor) {
this.setState({navBarColor: navBarColor});
} ... etc.
}
Where this.state.navBarColor is used to set the backgroundColor prop of the navigationBar.
Is this possible with the Navigator component? I see that it appears to be with NavigatorIOS, so I don't understand why it wouldn't be here.
Thanks!
The Navigator component has no display of its own, it only manages the scene transitions and routing, so asking how to do this "with Navigator" is not right. This is contrasted with NavigatorIOS which dictates the display as well.
Your question mentions "NavigationBar", is that React Native Navbar?
If yes, somewhere in the renderScene() function there will be a reference to the component, you simply need to pass it the appropriate navBarColor prop.
<NavigationBar statusBar={{ tintColor: route.navBarColor }} />

Categories