I'm trying to make a basic chat application where the use enters a message, then it appears on the screen. Like a normal messaging system I'd like the scroll bar to be at the bottom point by default. I've attempted to that that with the code below.
Here is the sandbox:
https://codesandbox.io/s/unruffled-pasteur-nz32o
And the code:
import React, { Component } from "react";
export default class Messages extends Component {
setScroll() {
this.messagesEnd.scrollIntoView({ behavior: "auto" });
}
componentDidMount() {
this.setScroll();
}
componentDidUpdate() {
this.setScroll();
}
render() {
return this.props.messages.map(message => {
return (
<div>
<h2>{message.message}</h2>
<div
style={{ float: "left", clear: "both" }}
ref={el => {
this.messagesEnd = el;
}}
/>
</div>
);
});
}
}
It works fine, however if there is a scrollbar in a component outside that container it also sets that to the bottom as well. Is there any way I can only set the scroll bar of the container to bottom (independent of any other scroll bars on the screen)?
Update your setScroll to include block: 'end' as an option for scrollIntoView:
setScroll() {
this.messagesEnd.scrollIntoView({ behavior: "auto", block: "end" });
}
https://codesandbox.io/s/wispy-water-463xy
Related
I have a div on which I've added onScroll and triggering a function on scroll event.
import React, { useRef } from 'react';
export const DemoComponent () => {
const myref = useRef(null);
const scrollEvent = () => {
//do something here
//Problem is that this event is triggering on load multiple times even when there is no scroll happening
};
return (
<div onScroll={scrollEvent} ref={myref}></div>
);
};
On load the scroll event triggers multiple times when there is no scrolling yet. Can't seem to figure out how to prevent this.
There must be something else causing that because, from the code you provided, the event only fires when the view has been scrolled. I added styling to get the scrollbar
export default class MyComponent extends Component {
scrollEvent = () => {
console.log("renders");
//do something here
//Problem is that this event is triggering on load multiple times even when there is no scroll happening
};
render() {
const style = {
width: "100px",
height: "100px",
overflowY: "scroll",
};
const innerDiv = {
height: "300px",
width: "100px",
background: "#efefef",
};
return (
<div style={style} onScroll={this.scrollEvent}>
<div style={innerDiv} />
</div>
);
}
}
I am having difficulties with my react application. I have a component that cyclically calls iframes, making them visible for a few seconds. The "reload" takes place via a button.
However, I need to check the iframe reload from another page. For example, create a "configuration.js" component in which there is a button which, once clicked, activates the "reload" function.
The iframe reload is however rendered in "http: // localhost: 3000 / simulatoretv", while the button that starts the reload is present in "http: // localhost: 3000 / configurator".
I hope I've been sufficiently clear. I attach the script of the component "Advertising", through which I run the reload of the iframes.
import React, { Component } from "react";
class Pubblicità extends Component {
state = {
index: 0,
iframeSrcs: ["/300x250", "/160x600", "/468x60"],
visibility: false
};
reload = () => {
const iframeLength = this.state.iframeSrcs.length;
if (this.state.index < iframeLength) {
this.setState({
index: this.state.index + 1,
visibility: true
});
} else {
this.setState({ index: 0, visibility: true }); //starting again
}
setTimeout(() => {
this.setState({ visibility: false });
}, 15000);
};
render() {
return (
<div>
<button
style={{
position: "absolute",
left: 0,
right: 0,
top: 500
}}
onClick={this.reload}
>
pubblicità
</button>
{this.state.visibility ? (
<iframe
style={{
position: "absolute",
left: 500,
right: 0,
top: 10
}}
key={this.state.index}
title="AdSlot"
src={this.state.iframeSrcs[this.state.index]}
height="100%"
width="100%"
scrolling="no"
frameborder="0"
/>
) : (
""
)}
</div>
);
}
}
export default Pubblicità;
This is the other component, where I would like the controlled iframes to be shown by the "Pubblicità" component.
The route of this component is "http: // localhost: 3000 / platformOTT".
import React, { Component } from "react";
import SimulatoreTV from "./SimulatoreTV";
import Pubblicità from "./Pubblicità";
class PiattaformaOTT extends Component {
render() {
return (
<div>
<SimulatoreTV />
<Pubblicità />
</div>
);
}
}
export default PiattaformaOTT;
Thanks to those who want to help me.
As you can see this image, "+Las mor" is a "see more" button, which when clicked expands the whole paragraph written above.
I need React code for this to be functional. Any help will be appreciated.
I am also attaching the code upon which this functionality is to be applied.
<section id="section-2">
<h4>Om mig</h4>
<p className="para">
{about}
</p>
</section>
<p style={{color:'#d39176'}}>
<img src={plus1} />
Läs mer
</p>
You probably want a button that toggles the state of expanded text onClick. Upon hitting the button you would set the state to the opposite of what it was. Here's a working example I wrote with React and Reactstrap. I just tested it locally. Here's a video demo of what you will see: https://screencast.com/t/in5clDiyEcUs
import React, { Component } from 'react'
import { Container, Button } from 'reactstrap'
class App extends Component {
constructor(props) {
super(props)
this.state = {
expanded: false //begin with box closed
}
}
//function that takes in expanded and makes it the opposite of what it currently is
showButton = () => {
this.setState({ expanded: !this.state.expanded })
}
render() {
const { expanded } = this.state
return (
<Container style={ { justifyContent: 'center', alignItems: 'center' } }>
<div>Always visable text.</div>
<Button onClick={ this.showButton }>Expand</Button>
{
expanded && //show if expanded is true
<div>Extended Text Here</div>
}
</Container>
)
}
}
export default App
I'm trying to implement a side nav bar like how it is shown on this website
https://adminlte.io/themes/AdminLTE/index2.html
Now I'm trying to basically emulate the expanded nav bar and mini navbar toggle. However, I'm having trouble updating the size of the navbar in react.
Here is my nav bar component
import React, { Component } from 'react';
class SideNavBar extends Component {
render() {
let sideBarStyle = {
'height': '100%',
'backgroundColor': 'lightblue',
'width': "80px",
'position': 'absolute',
'top': '0',
'left': '0'
}
setTimeout(() => {
sideBarStyle["width"] = "300px";
}, 1000)
return (
<div style={sideBarStyle}>
sidenavbar
</div>
);
}
}
export default SideNavBar;
I put a set timeout there just because I wanted to quickly test if it was possible to expand the div's width from a click event.
But I get the following error
TypeError: Cannot assign to read only property 'width' of object '#<Object>'
How do I go about updating an element's size based on click events?
Can you try below.
import React, { Component } from 'react';
class SideNavBar extends Component {
constructor(props){
super(props);
this.state = {
width : 80
}
}
componentDidMount(){
setTimeout(() => {
this.setState({
width: 300
})
}, 1000);
}
render() {
let sideBarStyle = {
'height': '100%',
'backgroundColor': 'lightblue',
'width': this.state.width,
'position': 'absolute',
'top': '0',
'left': '0'
}
return (
<div style={sideBarStyle}>
sidenavbar
</div>
);
}
}
export default SideNavBar;
One more thing you no need to specify px explicitly in React. Just no is enough. React will take care of px.
I'm building a "hovering" menu, using semantic-ui-react's Popup, and want to add a simple show-hide transition, how it can be done?
this is probably coming in too late for this specific OP, but might be useful for someone else trying to figure same out.
I believe you can use the TransionablePortal as shown in the example. Just for fun, I adapted that example to what I think you are trying to do:
import React, { Component } from 'react'
import { Button, Menu, TransitionablePortal } from 'semantic-ui-react'
export default class TransitionablePortalExamplePortal extends Component {
state = { open: false }
handleOpen = () => this.setState({ open: true })
handleClose = () => this.setState({ open: false })
render() {
const { open } = this.state
return (
<TransitionablePortal
closeOnTriggerClick
onOpen={this.handleOpen}
onClose={this.handleClose}
transition={{animation: "fade left", duration: 500 }}
openOnTriggerClick
trigger={
<Button circular basic
icon="ellipsis vertical"
negative={open}
positive={!open}
/>
}
>
<Menu vertical style={{ right: '1%', position: 'fixed', top: '0%', zIndex: 1000}}>
<Menu.Item>Menu Item 1</Menu.Item>
<Menu.Item>Menu Item 2</Menu.Item>
</Menu>
</TransitionablePortal>
)}}
You should be able to make the transition use onMouseEnter and onMouseLeave if you want same transition to be on hover, instead of on click.
You can find in their official documentation example where you can make custom style for popup
import React from 'react'
import { Button, Popup } from 'semantic-ui-react'
const style = {
borderRadius: 0,
opacity: 0.7,
padding: '2em',
}
const PopupExampleStyle = () => (
<Popup
trigger={<Button icon='eye' />}
content='Popup with a custom style prop'
style={style}
inverted
/>
)
export default PopupExampleStyle
You can try to add transition property here