I use the reakt photo gallery library; my component gets an array of images as props and converts it into an array of objects with fields {src, width, height}. Everything works well, but the problem is that I have a specific height for the block, into which the gallery should be inserted. the height of the block is significantly less than the height of the entire block of the gallery, so I assumed that the pictures would scroll horizontally, and they still continue to scroll vertically, how can I make a horizontal scroll?
import React from 'react';
import Gallerys from 'react-photo-gallery';
const Content = styled.div`
height: 700px;
width: auto;
overflow-x: scroll;
img {
border-radius:10px;
}
`;
class Gallery extends React.Component {
render() {
return (
<Content>
<Gallerys direction={'row'} margin={40} photos={images} />
</Content>
);
}
}
export default Gallery;
please check the answer here https://codesandbox.io/embed/lively-sun-zqe7g
Note: Use this in your style.css/ style.scss
//use in css
.react-photo-gallery--gallery div {
flex-flow: nowrap !important;
}
//use in sass/scss
.react-photo-gallery--gallery{
div{
flex-flow: nowrap !important;
}
}
Related
I have created a product carousel with react, it has 10 products, but I only want a max of 4 products to display at any one time, I tried reducing the width but that didn't work. Also had a look at the documentation for the carousel but couldn't find a solution for this https://www.npmjs.com/package/pure-react-carousel#component-properties-props
This is the git repo for the carousel https://github.com/RMP1992/react-product-carousel
react Carousel component
import React from 'react';
import {data} from'../data/data';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext, Image } from 'pure-react-carousel';
import './Carousel.css';
import Card from './Card';
export default class extends React.Component {
render() {
return (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={125}
currentSlide={4}
totalSlides={10}
visibleSlides={4}
>
<Slider>
{data.map(item =>(
item.carouselData.map(product => (
<Slide >
<Image><img src={product.productImageUrl}/></Image>
<p>{product.name}</p>
<p>£{product.price.formattedValue}</p>
</Slide>
))
))}
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
);
}
}
CSS
.image___xtQGH {
display: block;
}
.carousel__slide {
list-style-type: none;
padding-bottom: unset !important;
width: 306px !important;
border: black solid 1px;
margin: 0 10px !important;
}
.carousel__slider-tray {
display: flex;
flex-direction: row;
}
I see you haven't imported their css yet.
Add this line to your App component and delete all your custom css as well. I think everything will work just fine.
import "pure-react-carousel/dist/react-carousel.es.css";
You can use Array#filter method to take first n elements from array.
{data.filter((item, index) => index < 4).map(item =>(
item.carouselData.map(product => (
<Slide >
<Image><img src={product.productImageUrl}/></Image>
<p>{product.name}</p>
<p>£{product.price.formattedValue}</p>
</Slide>
))
))}
Also, you can use lodash take method
https://lodash.com/docs/4.17.15#take
So I am using react icons and I have two different icons that I am styling with styled components. My issue is that they essentially have the exact same styles, but the only difference is which icon I am choosing to style.
I don't know how to combine both icons into one styled component
Here is my code
const backArrow = styled(IoArrowBack)`
width: 50px;
height: 50px;
`;
const forwardArrow = styled(IoArrowForward)`
width: 50px;
height: 50px;
`;
Since I am using styled components, I just pass the icon into the () based on which one I want to style. The issue is I have over 12 lines of the exact same styles for both icons. It doesn't make sense to repeat the exact styles
How would I create one styled component, but display two different icons?
Example concept like this
const arrowIcon = styled(IoArrowBack, IoArrowForward)`
width: 50px;
height: 50px;
`
But then the issue occurs if I were to add them to my JSX
Cause then how would I even add the code?
I can't do
<arrrowIcon>Back arrow</arrowIcon>
<arrrowIcon>Forward arrow</arrowIcon>
So it wouldn't know which icon is which.
Is this even possible with styled components, or would I just have to copy and paste the same styles for each icon?
This piece of code is a bit weird to me, I think this is not a valid code
const arrowIcon = styled(IoArrowBack, IoArrowForward)`
width: 50px;
height: 50px;
`
However you can do a trick to get a shared style
const sharedIconStyle = css`
width: 50px;
height: 50px;
`
And
const styledArowBack= styled(IoArrowBack)`
${sharedIconStyle}
`
const styledArrowForward = styled(IoArrowForward)`
${sharedIconStyle}
`;
Could you just do it with React?
import React from "react";
import "./styles.css";
import { ReactComponent as icon1 } from "./icons/1.svg";
import { ReactComponent as icon2 } from "./icons/2.svg";
export default function App() {
return (
<div className="App">
<SizedIcon Icon={icon1} />
<SizedIcon Icon={icon2} />
</div>
);
}
const SizedIcon = ({ size = 50, Icon }) => {
console.log(typeof Icon);
return (
<div>
<Icon width={size} height={size} />
</div>
);
};
What I did is wrapped the icons in a div and styled the div, for example change the icon colors to red:
const IconStyles = styled.div`
color: red;
`
<IconStyles>
<IoArrowBack />
</IconStyles>
<IconStyles>
<IoArrowForward />
</IconStyles>
If you want to change the size of the icons then add a font-size in the div containing the icons, that is how I personally do it.
I'm currently using VideoPlayer from react-video-js-player and I'm trying to override the default height/width styles to have the video inherit the parents height/width.
Since VideoPlayer is simply React wrapper for VideoJS. I assume the styles and class names are the same.
I tried doing something like this:
import VideoPlayer from "react-video-js-player"
export const VideoJS = styled(VideoPlayer)`
position: relative;
height: 100%;
`
Setting the height and width to be 100% in the props doesn't work
<VideoPlayer
controls="true"
height={"100%}
width={"100%"}
src="examplevideo"
/>
.
the parent container is set to 100% width and height.
Any ideas?
I would do something like this , first inspect the video player element in browser to know what is its wrapper, let's say its a div . you can do something like this :
export const VideoPlayerWrapper= styled.div`
>div{
//this will target the videoPlayerwrapper
position: relative;
height: 100%;
}
`
import { ReactComponent as SVGTest } from '../images/299.svg'
Is there a way to extract the width from the SVGTest during the return.
I want to compare the default width of the SVG vs the width of the window. If less than I want to use the SVG width.
At the moment I set the width to 290px for ALL hundreds of SVGs in the App and the height adjusts accordingly.
However some SVGs are wider and for those I would prefer to use its width over my default 290px.
You should avoid hardcoding your SVG, also it's a good practice to treat SVG as a component.
Try resetting your SVG's width, height with CSS and use viewBox for scalling.
This way it will scale its container (Box in the next example)
const Box = styled.div`
width: 300px;
background-color: palevioletred;
`;
const SVGContainer = styled.div`
svg {
width: 100%;
height: 100%;
}
`;
// Default width,height of SVG are 100px
const App = () => (
<Box>
<SVGContainer>
<SVG />
</SVGContainer>
</Box>
);
I'm doing SPA wherein I've sticky header and a half background image with 3 cards (having a title and image) on, the only thing I'm being stuck is when, I scroll down the top image must have transitioned. when the page is getting scrolled the background image should appear in that much of image transition. when I scroll back up the image must do transition expanding itself and hiding the background image.
post.scss:
#import '../scss/common.scss';
.container{
background-image: url("../images/bg2.jpg") ;
height:80%;
//background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.header{
// background-color: $primary-background;
padding: 10px 16px;
// color: #f1f1f1;
height: 50px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 100px;
}
.blank{
height: 800px;
}
post.js:
import React from 'react';
import TitleContainer from '../container/titleContainer';
import './post.scss';
import Cards from '../container/cards';
import imgT from '../images/city1.jpg';
class Post extends React.Component{
constructor(props) {
super(props);
this.state={
}
this.header = React.createRef();
}
handscroll=(e)=>{
const node = this.header.current;
let sticky=node.offsetTop
//console.log(node)
// console.log(sticky)
if (window.pageYOffset > sticky) {
node.classList.add("sticky");
} else {
node.classList.remove("sticky");
}
// console.log(e)
}
componentDidMount(){
window.addEventListener('scroll',this.handscroll)
}
render(){
return(
<div className="container" >
<div className="header" ref={this.header}>
<TitleContainer title="World Top Cities"/>
</div>
<div className="content">
<Cards title="t1" cntryImg={imgT} />
<Cards title="t2" cntryImg={imgT} />
<Cards title="t3" cntryImg={imgT} />
<div className="blank"></div>
</div>
</div>
)
}
}
export default Post;
card.scss:
%common-all{
width: 100%;
}
//border:1px solid #80808040;
//height:250px;
// border-radius: 0 0 15px 15px ;
#mixin commonFn($border,$height,$borderRadius){
border:$border;
height:$height;
border-radius: $borderRadius ;
}
.container3{
#extend %common-all;
// border-radius: 40px;
margin-top:3%;
.title{
#extend %common-all;
#include commonFn(1px solid #80808040,50px,15px 15px 0 0);
background-color: white;
}
.cntryImg{
#extend %common-all;
#include commonFn(0,250px,0 0 15px 15px)
}
}
cards.js:
import React from 'react';
import '../scss/cards.scss'
class Cards extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div className="container3">
<div className="title">
{this.props.title}
</div>
< div className="cntryImg1">
<img src={this.props.cntryImg} alt="noImg" className="cntryImg"/>
</div>
</div>
)
}
}
export default Cards;
I don't know where I'm going wrong, I do have any much no idea how do I approach it. when the page is getting scrolled down the background image should appear in that much of image transition (here image transists). When I scroll back up the image must do transition expanding itself and hiding the background image.
Please help I'm stuck past two days. Let me know if I'm not clear. Please help me on how doing it.
Updated
No, not height theirs half background image, out of 3 "containers3"(cards) 2 "containers3"(cards) covering the background image one is white background when I scroll down there should be transition effect the suppose 10px (just for ex) I scroll only that many pixels transition must happen for that particular card (not hidden at once transition effect way of hiding and showing background image when scroll up or down respectively) and background image for that particular 10px must be shown, position must not change. (here theirs transition way of hiding and showing background image)