I want to be able to click on one of the bars to open a new window, but it seems like the tremor library doesn't have the functionality to have some kind of onclick. Could someone help me with that?
my barchart code
I have tried changing it from a functional component to a class component so I can use this.state, but I did not manage to make it work.
Related
In React Native, I would like to achieve the following outcome (example):
example1 example2
On Long Press of the image (or touchableOpacity), I hope to display an overlay view of some extra information (could be images or text). The information disappears when the finger leaves the screen. I was thinking if it is something related to overlay view and setState, but I could not find the function where the view only appears during long presses. Is there a way to achieve this? Or is there a module that could provide a solution?
Any help would be appreciated!
If you are using the latest react native version you can use the onPressOut functionality of a pressable component: https://reactnative.dev/docs/pressable.
Trigger the show overlay with the onLongPress (or onPressIn but it's not a good UX) function and then trigger the hide overlay with onPressOut function.
For the overlay I suggest you a cool library like:
https://reactnativeelements.com/docs/tooltip/
So I have a component that returns a button with some custom text and an icon. I'm pulling the icons from expo vector icons and so to use the icons I need to write something like:
<Icon_Name name"name"......>
I want to wrap my custom component around an icon or any other component, so then I can use various different icons within that component.
So I want my code to basically be:
<Custom_Component>
<IconOrSomeOtherComponent />
</Custom_Component>
I want to somehow call that icon component within my custom component. Is this possible?
I know that I can pass in variables into a custom component like:
<Custom_Component someVariable="some variable" />
and then use "someVariable" within my the function of the component, but I was hoping to find a solution where I can just wrap a component and call the "wrapped" component inside the function of my "Custom_Component".
I'm using functional components by the way, not class components.
I'm working in a dashboard inside a React App and I used the React + DC.JS (https://github.com/LightTag/dcjs-in-react) as a guide. So far, so good.
Now I was required to add some new info in a component that used to be a dc.js dataTable so when the user click in a row, it would expand and show more data. My idea was to use the dataGrid instead and inject an material-ui ExpandPanel inside the HTML function of the dataGrid. Since the documentation says you can use any template engine inside it, I thought it would work.
Well, it doesn't work. I tried use an external function to the render the elements, explicit call React.createElement, put it inside parenthesis for the JSX, but all I got is a bunch of ''[object Object]''.
Any ideas of how to render React Elements inside a DC.js DataGrid?
I have a React App with a global custom cursor (not only a png changed in CSS, but a colored circle-div that‘s following the mouse).
My App consists of various child components (project teasers), when hovering those project teaser components the cursor component should change size, color and text content.
I have no experience with Redux so far, but do I need to store the cursor state in Redux for such a scenario or can I pass it down another way?
Thanks.
You can either use react context/redux or manually pass down the props each component. If you want study react context, here's a good article.
I am unable to make a focus inside a searchbox of Office UI Fabric React component.
I have a DialogBox where I am having a searchbox. This dialog box I trigger on button click and I wants the focus to be inside the searchbox once the dialog is there.
I have tried the mostly what is mentioned in the documentation of Office UI Fabric.
So, what I have tried uptill now:
private _searchBoxRef = React.createRef<ISearchBox>();
My SearchBox component looks like:
<SearchBox
componentRef={this._searchBoxRef}
placeholder="Ask a question"
iconProps={{ iconName: 'Chat' }} />
And in the componentDidMount hook:
this._searchBoxRef.current.focus();
I am trying to make a focus inside the searchBox.
I have followed the documentation under the link:
React Guidelines for Ref Usage
Does someboby have a clue what I am doing wrong here or something I am missing??
So, I found the answer after trying out few things.
The problem was, even though I was trying to make focus inside componentDidMount(), I found that the DOM was still not ready and my searchbox inside my modal was not there.
Two things could be done here,
Either, wait for some time with SetTimeout and then tried to make focus
Can use componentDidUpdate, if setting the state which is re-rendering the component. This might also give hickups if DOM is not ready, so keep this in mind.
Hope this will help someone.