I have a react-table component with custom column header
const popupRef = createRef();
const column = [{
Header: () =>
<div ref={popupRef} className="eye-icon">
<img src={icon}/>
</div>
fixed: "left",
sortable: false,
headerClassName: "table-header-class",
className: "table-row-class",
width: 70
}];
And I have a reactjs-popup that I want to be triggered after I press on that component.
return (
<div>
<Popup
className="popup"
closeOnDocumentClick
trigger={popupRef.current}
arrow={true}
repositionOnResize={true}
on="click"
position="bottom left"
>
<div className="popup">
<span>popup</span>
</div>
</Popup>
<div className="table">
<ReactTableFixedColumns
showPagination={false}
defaultPageSize={selectedTestsLength}
data={data}
style={{height: "73vh"}}
columns={column}
/>
</div>
</div>
);
It doesn't work.
Of course I can make onClick event in header's div to forcly open the popup with reactjs-popup open property - but it appears on the center of the screen and it looks like modal, so this approach is not suitable, I want it to stick to the div, to be placed in correct place.
I think you are using the wrong approach here. Refs are not needed to achieve what you want.
Just simply declare the Popup inline inside the header:
const column = [{
Header: () =>
<Popup trigger={
<div ref={popupRef} className="eye-icon">
<img src={icon}/>
</div>
}>
<div className="popup">
<span>popup</span>
</div>
</Popup>
fixed: "left",
sortable: false,
headerClassName: "table-header-class",
className: "table-row-class",
width: 70
}];
I don't have access to your full code so I can't tell for sure but that should give you the idea.
I just did an empty div and put trigger in it
trigger={<div className="sample-trigger"></div>}
.sample-trigger {
width: 1px;
height: 1px;
display: block;
visibility: hidden;
}
In the main div I am using to trigger the popup I set the onClick to change the state of {wasPopupOpen}
<Popup
className="popup"
closeOnDocumentClick
open={wasEyePopupOpen}...
I also make some adjustmenst on popup window so it looks like inside of that div.
Related
Currently I'm using react.js and I'm trying to get two div's to be side by side.
Currently I'm trying to
<div id="sidebar" style = "display:inline-block;" >
<script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style="display: inline-block; width: 20%; height: 50%; "></div>
with sidebar.js as the where react is stored. This unfortunately doesnt work however as it just moves map-canvas to the side while sidebar isn't to the left of it; its on top. I've tried many various combinations w/ float as well and none of them seem to work
Another option is to edit the sidebar.js code where I currently have
return <div>
<input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
<ul>
{ libraries.map(function(l){
return <li>{l.name} </li>
}) }
</ul>
</div>;
in which I try doing return <div style ="display: inline-block;">
However, in this case the generated html doesnt show up at all. I'm perplex to what I should try but react seems like it doesnt want to play nice with other div elements.
That's because in React, the style prop takes an object instead of a semicolon-separated string.
<div id="sidebar" style={{display : 'inline-block'}} >
<script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style={{display: 'inline-block', width: '20%', height: '50%'}}>
</div>
Edit:
So this:
return <div style="display: inline-block;">
Would become this:
return <div style={{display: 'inline-block'}}>
const styles = {
container: {
backgroundColor: '#ff9900',
...
...
textAlign: 'center'
}
}
export default class App extends React.Component {
render() {
return(
<div className="container" style={styles.container}>
// your other codes here...
</div>
);
}
}
I have JSX code like this:
<div id="parent" onClick={clickOnParent} style={{ width: 100, height: 100 }}>
<div id="child" onClick={clickOnChild} style={{ width: 20, height: 20 }} />
</div>
When I click on parent (outside the child) it will run clickOnParent, and when I click the child it will run both clickOnParent and clickOnChild of course.Now I want to trigger only clickOnChild and ignore clickOnParent when clicking exactly on the child. How can I do?
Use Event.stopPropagation()
const clickOnChild = (event) => {
event.stopPropagation();
...
}
I have a React Component with an absolute positioned div which overlays other content in my application. The div is used to fire react's onMouseMove event.
I want to set the css value pointer-events-none so all components underneath the div are still clickable, have pointer events etc. Whatever when pointer-events-none is present, the onMouseMove event will not fire anymore. Everything should behave like the overlay div is not present, it should just fire onMouseMove.
The code structure looks like this:
<button>I should be clickable</button>
<div>
<div
style={{
opacity: 0,
position: `absolute`,
top: `50px`,
left: `50px`,
width: `30vw`,
height: `30vh`,
pointerEvents: `none`,
}}
onMouseMove={() => {
console.log(`Fire!`)
}}
>
Overlay
</div>
<button>I should be clickable</button>
<a>I should be clickabel</a>
</div>
<button>I should be clickable</button>
I think I'm missing something or have chosen a completely wrong path here.
Thanks a lot for your help!
You need to place overlay div at the root (in such case events will propagate), remove pointerEvents rule and opacity so that the content inside div would be visible:
<div
style={{
position: `absolute`,
top: `50px`,
left: `50px`,
width: `30vw`,
height: `30vh`
}}
onMouseMove={() => {
console.log(`Fire!`)
}}
>
<button>I should be clickable</button>
<button>I should be clickable</button>
<a>I should be clickable</a>
<button>I should be clickable</button>
</div>
I'm learning React.Js. I'm trying to attach an event to write something in the console, however i cant get my function to trigger. Does anyone know how i would attach an onClick event to a react div? I apologise if this is a basic question but ive tried several different methods and none of them are working.
I have tried the two ways of triggering the function shown below but neither is working.
So, Ive realised that the reason that the events were not working was because I was rendering server side. If i render on the client then the event triggers. Does anyone know how to make it trigger if i have initially rendered on the server?
class Individual extends React.Component {
handleClick = () => {
alert("GREAT");
}
render() {
const indDiv = {
margin: '5px',
width: '100px',
height: '120px',
cursor: 'pointer',
border: '5px solid pink',
color: 'blue',
float: 'left'
};
return (
<div>
<div onClick={this.handleClick.bind(this)}>
Alert 1
</div>
<div onClick={() => this.handleClick}>
Alert 2
</div>
<div style={indDiv}>
{this.props.num}. {this.props.name}.
</div>
</div>
);
}
}
Thank you to everyone that contributed to this. After everything i found that because i had initially created this as a server rendered piece, I had to attach the events after the page had rendered. I was using ReactJS.Net and had to initialize it seperately using hydrate.
Both the ways of calling handler function is incorrect in your code.
In your code handleClick is an arrow function hence manual binding is not required.
If it is not an arrow function then the manual binding should be done always in constructor only. Never do binding anywhere else like you did in render.
When you use onClick={() => this.handleClick} this is wrong. It should be onClick={()=> this.handleClick()}. If no Paranthesis then this is correct onClick={this.handleClick}
So change
<div onClick={this.handleClick.bind(this)}>
Alert 1
</div>
<div onClick={() => this.handleClick}>
Alert 2
</div>
To
<div onClick={()=> this.handleClick()}>
Alert 1
</div>
<div onClick={() => this.handleClick()}>
Alert 2
</div>
The reason you should not do binding anywhere else in the component except constructor because for eg you did binding directly in render so what happens in this case is it creates a new function in webpack bundle file every time the component renders and re renders again hence bundle file grows large. Hence it is recommended to bind it only in constructor
You need to declare the handler method after the render method. Here is a basic implementing of your code in jsfiddle.
https://jsfiddle.net/ufyxwv8p/
class Individual extends React.Component {
render() {
const indDiv = {
margin: '5px',
width: '100px',
height: '120px',
cursor: 'pointer',
border: '5px solid pink',
color: 'blue',
float: 'left'
};
return (
<div>
<div onClick={this.handleClick}>
Click to show in console
</div>
<div style={indDiv}>
{this.props.num}. {this.props.name}.
</div>
</div>
);
}
handleClick = () => {
console.log('this is:', this);
}
}
ReactDOM.render(<Individual/>,document.getElementById("app"))
here try like this the way you are defining your handleclick function is wrong i have edited your code online on sandbox to make it work. call function the way you are calling on Alert 1 than define function the way I have uploaded an image
Link of codesandbox of your code check that
Check this image of that code if you dont have time to go through whole code
The click handler on Alert 1 is already working. It's not necessary to bind when you use a the () => {} class properties syntax.
Your click handler on Alert 2 isn't working because you've written an inline arrow function which returns another function. You need to call it, like () => this.handleClick().
Here is a working snippet of your code.
class Individual extends React.Component {
handleClick = () => {
alert("GREAT");
};
render() {
const indDiv = {
margin: "5px",
width: "100px",
height: "120px",
cursor: "pointer",
border: "5px solid pink",
color: "blue",
float: "left"
};
return (
<div>
<div onClick={this.handleClick}>Alert 1</div>
<div onClick={() => this.handleClick()}>Alert 2</div>
<div style={indDiv}>
{this.props.num}. {this.props.name}.
</div>
</div>
);
}
}
ReactDOM.render(<Individual />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
You have to use bind
onClick={this.handleClick.bind(this)}
or use arrow function
onClick={()=>this.handleClick()}
class Individual extends React.Component {
handleClick = () => {
alert("GREAT");
};
render() {
const indDiv = {
margin: "5px",
width: "100px",
height: "120px",
cursor: "pointer",
border: "5px solid pink",
color: "blue",
float: "left"
};
return (
<div>
<div onClick={this.handleClick}>Alert 1</div>
<div onClick={this.handleClick}>Alert 2</div>
<div style={indDiv}>
{this.props.num}. {this.props.name}.
</div>
</div>
);
}
}
ReactDOM.render(<Individual />, document.getElementById("app"));
objective
I have a div that I want to make act like a tooltip with reactjs.
HTML
<div>on hover here we will show the tooltip</div>
<div>
<div class="tooltip_custom">this is the tooltip!!</div>
</div>
I am used to angularjs using the ng-show with a condition on the <div> , I was wondering if there is such binding in reactjs , or else how can I do this functionality ?
Thanks
You can make your component to return the following markup
return (
<div>
<div onMouseOver={this.handleMouseIn.bind(this)} onMouseOut={this.handleMouseOut.bind(this)}>on hover here we will show the tooltip</div>
<div>
<div style={tooltipStyle}>this is the tooltip!!</div>
</div>
</div>
);
Where tooltipStyle is assigned like this:
const tooltipStyle = {
display: this.state.hover ? 'block' : 'none'
}
So tooltip depends on component state, now in handleMouseIn and handleMouseOut you need to change component state to make tooltip visible.
handleMouseIn() {
this.setState({ hover: true })
}
handleMouseOut() {
this.setState({ hover: false })
}
Here is working example.
You can start diving in React with this article: Thinking in React.
One option is just to do it in CSS. It's not quite as flexible, but with markup like:
<div className="tooltip-on-hover">Hover here</div>
<div className="tooltip">This is the tooltip</div>
You could do:
.tooltip {
...
visibility: hidden; /* Or display: none, depending on how you want it to behave */
}
.tooltip-on-hover:hover + .tooltip { /* Uses the adjacent sibling selector */
visibility: visible; /* Or display: block */
}
Example:
.tooltip { display: none; }
.tooltip-on-hover:hover + .tooltip { display: block; }
<div class="tooltip-on-hover">Hover here</div>
<div class="tooltip">This is the tooltip</div>
You could also nest the tooltip inside the element so you could use a normal descendant selector like .tooltip-on-hover:hover .tooltip. You could even use a ::before or ::after pseudo-element, there are guides around on how to do this.
I think whatever you want to show as tooltip, just add that to the "title" of the div where you want to show it.
Eg:
<div title="I am the tooltip text">I am the div where you should hover</div>
But if its a custom designed div then go as the answers given before.
Install npm package:
npm install react-tooltip
Usage:
import ReactTooltip from "react-tooltip";
<div data-tip="msg to show" data-for='toolTip1' data-place='top'>Tooltip</div>
<ReactTooltip id="toolTip1" />
You can also use React Mapple ToolTip which is easy to use and customize and also comes with predefined themes.
Disclaimer: I am the author of this library
reactjs-mappletooltip
You can use react-tooltip package. Super easy to use and handy also.
Installation: npm i react-tootip.
Example:
1. import it :
import ReactTooltip from "react-tooltip"
Include it in your component:
<div className="createContent">
**<ReactTooltip />**
<div className="contentPlaceholder">
add tool tip to your button/div or any element: data-tip="add tooltip message"
<button className="addSection" data-tip="add tooltip message" onClick={() => this.onAddChild()}>+</button>
package url: https://www.npmjs.com/package/react-tooltip
import Tooltip from "#material-ui/core/Tooltip";
const HtmlTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: 'rgba(255,250,228)',
color: 'rgba(0, 0, 0, 0.87)',
maxWidth: 400,
fontSize: theme.typography.pxToRem(12),
border: '1px solid #dadde9',
},
}))(Tooltip);
headerName: 'FEEDBACK',
field: "remarks",
flex: 0.30,
renderCell: (params: GridCellParams) => (
<Grid>
<HtmlTooltip title={params.value} placement="bottom">
<Typography style={{ color: "inherit", cursor: "pointer" }}>{params.value}</Typography>
</HtmlTooltip>
</Grid>
)
In case, if you are using react-bootstrap in your project, then use https://react-bootstrap.github.io/components/overlays/ Overlay with the tooltip.
MouseEnter and MoverLeave need to be used though.
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={renderTooltip}>
<div>on hover here we will show the tooltip</div>
</OverlayTrigger>