I'm using react-twitter-embed to display a timeline in a home page. But I would like to add a custom CSS grid (the tweets, limited by six, must appear horizontally and not vertically):
import { useTranslation } from "react-i18next";
import { TwitterTimelineEmbed } from "react-twitter-embed";
import { FollowUsOn } from "../Footer/SubModules/FollowUs/follow-us-on.component";
import { BlockTwitterBtn } from "./SubModules/block-twitter-btn.component";
export const BlockTwitter = () => {
const { t } = useTranslation();
return (
<div className="container blockTwitter">
<div className="blockTwitter__firstCard">
<h3 className="blockTwitter__title">{t("common:blockTwitterTitle")}</h3>
<BlockTwitterBtn />
<FollowUsOn />
</div>
<section className="twitterContainer">
<div className="twitter-embed">
<TwitterTimelineEmbed
sourceType="profile"
screenName="Quebecor"
options={{
tweetLimit: "6",
width: "100%",
height: "100%"
}}
noHeader="true"
noFooter="true"
></TwitterTimelineEmbed>
</div>
</section>
</div>
);
};
I read I could use the option onLoad={function with custom CSS}, but I don't know exactly how to do this on React...
Related
I've just implemented the react material ui carousel, and it was pretty straightforward, the only thing i didn't catch, is how to hide buttons and show them only on over.
I noticed the props navButtonsAlwaysVisible and set it to false but it isn't enough.
Should i implement my own logic for that, or maybe I'm just missing something?
here's the component code:
import styles from '../../styles/Testimonial.module.scss'
import Image from 'next/image'
import Carousel from 'react-material-ui-carousel'
const Testimonial = _ => {
const items = [
{
imageUrl: "/png/image0.webp",
feedback: "feedback0",
name: "name0",
location: "location0"
},
{
imageUrl: "/png/image1.jpeg",
feedback: "feedback1",
name: "name1",
location: "location1"
}
]
return (
<div id="customers" className={`section ${styles.testimonial}`}>
<h2 className={`title ${styles.title}`}>Clientes Felizes</h2>
<span className={"separator"}> </span>
<Carousel
className={styles.carousel}
autoPlay={true}
stopAutoPlayOnHover={true}
interval={5000}
animation={"slide"}
swipe={true}
navButtonsAlwaysVisible={false}
navButtonsProps={{
style: {
backgroundColor: "#8f34eb",
opacity: 0.4
}
}}
>
{
items.map( (item, i) => <Item key={i} item={item} /> )
}
</Carousel>
</div>
)
}
function Item(props)
{
return (
<article className={styles.testimonial__card}>
<div className={styles.testimonial__photo_container}>
<Image
className={styles.testimonial__photo}
src={props.item.imageUrl}
alt="Testimonial"
width={312}
height={300}
/>
</div>
<p className={styles.testimonial__copy}>{props.item.feedback}</p>
<span className={styles.testimonial__name}>{props.item.name}</span>
<span className={styles.testimonial__city}>{props.item.location}</span>
</article>
)
}
export default Testimonial;
there's a prop called navButtonsAlwaysInvisible
navButtonsAlwaysInvisible={true}
You can try using Custom CSS for your purpose. Based on the current rendered markup,
.jss6 {
opacity: 0;
transition: all ease 1000ms; /* So that it does not disappear quickly */
}
You can define the hover for the parent so that it displays only when the parent container is hovered on:
.jss1.Testimonial_carousel__3rny3:hover .jss6 {
opacity: 1;
}
This is how it works now:
I have added a modal to display a login pop-up.
My issue is that the Modal itself seems having padding internally which break my user experience.
As you can see below in the image:
Adding a link as I am not able to attached the image. https://photos.app.goo.gl/iJZRZ28o8dQhmJh4A
[enter link description here][1]
and below the code
import React from "react";
import { Modal } from "react-bootstrap";
import '../../assets/styles/Login.css';
class LoginRegisterModal extends React.Component {
constructor(props, context) {
super(props);
this.state = {show: false};
}
....
render() {
const styleModal = {
marginTop: "15%",
marginLeft: "30%",
padding: 0,
width:770,
height:480,
backgroundColor:"#ffffffff",
borderRadius:21.5,
}
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add('right-panel-active');
});
signInButton.addEventListener('click', () => {
container.classList.remove('right-panel-active');
});
return (
<Modal show={this.state.show} style={styleModal} >
<div class="container" id="container">
<div>
.....
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Sign in.</h1>
<p>
Nice to see you again.Login and continue the journey.
</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hey, new friend!</h1>
<p>New to the Village? Sign up and start your journey</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
</Modal>
);
}
}
export default LoginRegisterModal;```
I have tried to remove all my containers and just display a simple text using `<p> test </p>` and I am facing the same issue. The `marginTop` and `marginLeft` defined in the style allowed my to move the Modal from the top left corner.
Any idea why I have some margin inside the modal ?
[1]: https://photos.app.goo.gl/iJZRZ28o8dQhmJh4A
I am having a modal with button inside. Unfortunatly, it's not properly working. During the build I got an error : TypeError: Cannot read property 'addEventListener' of null
Below is the code:
import React from "react";
import { Modal } from "react-bootstrap";
import '../../assets/styles/Login.css';
class LoginRegisterModal extends React.Component {
constructor(props, context) {
super(props);
this.state = {show: false};
}
componentDidMount(){
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add('right-panel-active');
});
signInButton.addEventListener('click', () => {
container.classList.remove('right-panel-active');
});
}
....
render() {
const styleModal = {
marginTop: "15%",
marginLeft: "30%",
padding: 0,
width:770,
height:480,
backgroundColor:"#ffffffff",
borderRadius:21.5,
}
return (
<Modal show={this.state.show} style={styleModal} >
<div class="container" id="container">
<div>
.....
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Sign in.</h1>
<p>
Nice to see you again.Login and continue the journey.
</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hey, new friend!</h1>
<p>New to the Village? Sign up and start your journey</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
</Modal>
);
}
}
export default LoginRegisterModal;
I have tried adding a if condition before the addListener but it's just fixing the error but not working.
Also I have tried to replace by onClick instead but it's not working the code
signUpButton = () => {
container.classList.add('right-panel-active');
}
but container is not known..
Any idea?
Thanks
Your code should be inside component did mount method componentDidMount(). That's because when you look for a element with id "signUp" it doesn't exist yet. I don't encourage you to do what you are doing. A better approach would be <button onClick={myMethod}>
I need to be able to hide components that gets wrapped because it goes over the max width.
<div style={{width:100}}>
<div style={{width:50}}>
component1
</div>
<div style={{width:50}}>
component2
</div>
<div style={{width:50}}>
component3
</div>
</div>
//But I actually use map to render children
<div style={{width:100}}>
{components.map((item, index) => {
return <div style={{width:50}}>component{index + 1}</div>)
}}
</div>
as shown in the code above, the parent div is of with 100. So the last component (component3) would go over the width of the parent by 50px and will be rendered in the second line. However, I want any component that leaves the first line to be not rendered at all. How do I make sure that only component1 and component2 shows and excludes component3?
You could add up the widths of all the components in a separate variable, and render null for all components remaining after the total width of those already rendered exceeds 100.
Example
class App extends React.Component {
state = {
components: [{ width: 50 }, { width: 50 }, { width: 50 }]
};
render() {
const { components } = this.state;
let totalWidth = 0;
return (
<div style={{ width: 100 }}>
{components.map((item, index) => {
totalWidth += item.width;
if (totalWidth > 100) {
return null;
}
return (
<div key={index} style={{ width: 50 }}>
component{index + 1}
</div>
);
})}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
I have a image viewer component that as one large image and 3 smaller ones below it. When you hover over one of the bottom images it changes the large image to the corresponding image. I would like to add a fade-in/fade-out transition when the larger image changes. So far I can get a fade-in and a fade-out on the mouse completely leaving the smaller image but, not hovering between the images. Here is my code:
import React, { Component } from 'react';
import Transition from 'react-transition-group/Transition'
import Image0 from './Image1.jpg'
import Image1 from './Image2.jpg'
import Image2 from './Image3.jpg'
import './ImageViewer.css';
const duration = 300;
const Images = [Image0, Image1, Image2]
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}
const transitionStyles = {
entering: { opacity: 1 },
entered: { opacity: 1 },
exiting: { opacity: .9 },
exited: { opacity: 0.01 }
};
const Fade = ({ in: inProp, currentImage }) => (
<Transition in={inProp} timeout={duration}>
{(state) => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
<img src={currentImage}/>
</div>
)}
</Transition>
);
class App extends Component {
state = { show: false, currentImg: Images[0] }
handleClick = e => {
this.setState({
show: !this.state.show,
currentImg: Images[Number(e.currentTarget.dataset.id)]
})
}
render() {
return (
<div className="App">
<Fade in={this.state.show} currentImage={this.state.currentImg}/>
<div className="small_image_wrapper">
<img className="small_image"
src={Image0}
alt="A wonderful bed"
data-id={0}
onMouseOver={this.handleClick}
onMouseOut={this.handleClick}
/>
<img className="small_image"
src={Image1}
alt="A wonderful bed"
data-id={1}
onMouseOver={this.handleClick}
onMouseOut={this.handleClick}
/>
<img className="small_image"
src={Image2}
alt="A wonderful bed"
data-id={2}
onMouseOver={this.handleClick}
onMouseOut={this.handleClick}
/>
</div>
</div>
);
}
}
export default App;
Also here's a link to what I have so far with transitions:
https://peaceful-jones-ee2ca2.netlify.com/
And without transitions:
https://practical-lamport-9cc94e.netlify.com/
I am not sure but you have to wrap all your images into TransitionGroup
import {TransitionGroup}, {Transition} from 'react-transition-group';
...
render() {
return (
<div className="App">
<TransitionGroup>
<Fade in={this.state.show} currentImage={this.state.currentImg}/>
</TransitionGroup>
<div className="small_image_wrapper">
/* here comes small images */
</div>
</div>
)};