I have a Splideslide element in react and am looking to move the description text over the image for each element. Currently the code I have is:
import {useEffect, useState} from "react";
import styled from "styled-components";
import {Splide, SplideSlide} from "#splidejs/react-splide";
import "#splidejs/splide/dist/css/splide.min.css";
function Popular() {
const [popular, setPopular] = useState([]);
useEffect(() => {
getPopular();
}, []);
const getPopular = async() => {
const api = await fetch(`https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&number=9`);
const data = await api.json();
console.log(data);
setPopular(data.recipes)
console.log(data.recipes)
}
return (
<div>
<Wrapper>
<h3>Popular Picks</h3>
<Splide options = {{
perPage:4,
arrows: false,
pagination: false,
drag: 'free',
gap: "4rem",
}}>
{popular.map((recipe) =>{
return (
<SplideSlide>
<Card>
<Gradient/>
<p>{recipe.title}</p>
<img src={recipe.image} alt={recipe.title}/>
</Card>
</SplideSlide>
);
})}
</Splide>
</Wrapper>
</div>
)
}
const Wrapper = styled.div`
margin: 4rem 0rem;
postion: absolute;
`;
const Card = styled.div`
min-height: 25rem;
overflow: hidden;
postion: relative;
img {
border-radius: 2rem;
postion: absolute;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
p {
position: absolute;
z-index: 10;
left: 50%;
bottom: 0%;
transform: translate(-50%, 0%);
color: black;
width: 100%;
text-align: center;
font-weight: 600;
font-size: 1rem;
height: 40%;
display: flex;
justify-content: center;
align-items: center;
}
`;
const Gradient = styled.div`
z-index: 3
postion: absolute;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5))
`;
export default Popular
Theoretically I believe this should be able to move the text on the image but for some reason it is not working as intended. The full project can be seen in the repository here: REPO. Feel free to comment for further information or any clarifications.
Maybe because of your multiple
postion: absolute;
instead of
position: absolute;
;)
Related
i'm trying to convert a normal javascript game code to react but i'm finding a lot of problems that i don't know how to solve (i'm not good with web development so, sorry if i misspell something)
what i want is that an image become 100% adjusted to the viewport and another image, which is a game character, stay in front of it, but the css styles aren't applying to them
this is my javascript code and my css:
import './App.css';
import Spring from './components/Spring'
import Background from './components/Background';
function App() {
return (
<div className="game">
<Background className="fundo"></Background>
<Spring classname='Spring'></Spring>
<div className='message'>Press enter to start</div>
<div class="score">
<span class="score_title"></span>
<span class="score_val"></span>
</div>
</div>
);
}
export default App;
and this is my css for now:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.game {
height: 100vh;
width: 100vw;
}
.Spring {
height: 100px;
width: 160px;
position: fixed;
top: 40vh;
left: 30vw;
z-index: 100;
}
.fundo{
height: 100vh;
width: 100vw;
z-index: 99;
}
.pipe_sprite {
position: fixed;
top: 40vh;
left: 100vw;
height: 70vh;
width: 6vw;
background-color: green;
}
.message {
position: fixed;
z-index: 10;
height: 10vh;
font-size: 10vh;
font-weight: 100;
color: black;
top: 12vh;
left: 20vw;
text-align: center;
}
.score {
position: fixed;
z-index: 10;
height: 10vh;
font-size: 10vh;
font-weight: 100;
color: goldenrod;
top: 0;
left: 0;
}
.score_val {
color: gold;
}
if anyone want to see my react components that i'm trying to apply the style, there it is:
import React, { Component } from 'react';
import background from './sprites/red_sun_ultimate.gif'
class Background extends Component {
state = { }
render() {
return <img src={background} alt='Background'></img>;
}
}
export default Background;
import React, { Component } from 'react';
import springSprite from './sprites/Spring_2.0.gif'
class Spring extends Component {
state = { }
render() {
return <img src={springSprite} alt='Spring'></img>;
}
}
export default Spring;
i really don't know what to do by this point, my styles are applying to the score val and etc but i just can't figure out why the styles aren't applying to the other things too
the result i'm getting is:
this is what i'm getting
I want to use the components i made multiple times while rendering dynamic content
but when i try to render them they just stack up on themselves in the same position
whenever i render the component, multiple times, i dont even see the sliders and the >title stacks up on eachother
import React from "react";
import styled from "styled-components";
import ellipse from "../img/ellipse.png";
import Range from "./Range";
function RangeComp() {
const titlesArr = [
"Cybersecurity",
"Developer",
"DevOps",
"Designer",
"Project Manager",
"Product Manager",
"Marketer",
"Writer",
];
console.log(titlesArr);
return (
<Container>
<Circle />
<Heading>Score your level of interest in these job titles:</Heading>
<Divs>
<Div1>
<Range title={titlesArr[0]} />
<Range title={titlesArr[1]} />
</Div1>
<Div2></Div2>
</Divs>
</Container>
);
}
export default RangeComp;
const Container = styled.div`
position: absolute;
width: 980px;
height: 583px;
left: 650px;
top: 220px;
box-shadow: 0px 4px 29px #f0f3ff;
border-radius: 35px;
:hover {
border: 1px solid black;
}
`;
const Circle = styled.div`
position: absolute;
background-image: url(${ellipse});
width: 30px;
height: 30px;
right: 1.8%;
top: 2%;
background-repeat: no-repeat;
background-size: cover;
`;
const Heading = styled.div`
position: absolute;
width: 400px;
height: 31px;
font-family: "HelveticaNeueCyr";
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 155.02%;
color: #30302e;
left: 8%;
top: 10%;
`;
const Divs = styled.div``;
const Div1 = styled.div``;
const Div2 = styled.div``;
Above is where i want to reuse the component but they just stack up on each other
Below is the component i want to reuse
import React, { useState } from "react";
import "./Range.css";
import styled from "styled-components";
import ReactSlider from "react-slider";
function Range(props) {
const [currentValue, setCurrentValue] = useState(0);
return (
<div className="range">
<ReactSlider
className="customSlider"
trackClassName="customSlider-track"
thumbClassName="customSlider-thumb"
marks={1}
min={0}
max={10}
defaultValue={0}
value={currentValue}
onChange={(value) => setCurrentValue(value)}
/>
<h4>{props.title}</h4>
<h1 className="range-value">{currentValue}/10</h1>
</div>
);
}
export default Range;
What's inside your Range.css?
If the position is:
position: absolute;
Then your components will always stack on top of each other because they all have the same style.
You might need to set the position to:
position: relative;
So that the components will position themselves relative to each other.
So this could honestly be as simple as just over looking it and staring for so long and being new to react but on my section component I'm loading in my backgroundImg prop wont load the image and I cant figure it out. My pictures are in the public folder and my code is in the src components folder
Also, I can get images to load in the file just not when I'm calling them through prop
Home.js This is where I am calling my component and trying to load the file in through the prop type
import React from 'react'
import styled from 'styled-components'
import Section from './Section'
function Home() {
return (
<Container>
<Section
title="Model S"
description="Order Online for Touchless Delivery"
backgroundImg='/public/pictures/model-s.jpg'
leftBtnText="Custom Order"
rightBtnText="Existing Inventory"
/>
<Section
title="Model E"
description="Order Online for Touchless Delivery"
backgroundImg=".\Pictures\model-e.jpg"
leftBtnText="Custom Order"
rightBtnText="Existing Inventory"
/>
<Section />
<Section />
</Container>
)
}
export default Home
//Home and styled help you stlye the component without using css
const Container = styled.div`
height: 100vh;
`
Section.js The component for the Screen
import React from 'react'
import styled from 'styled-components'
//props are just parameters you can set when calling the component
function Section(props) {
return (
<Wrap bgImg={props.backgroundImg}>
<ItemText>
<h1>{props.title}</h1>
<p>{props.description}</p>
</ItemText>
<Buttons>
<ButtonGroup>
<LeftButton>
{props.leftBtnText}
</LeftButton>
<RightButton>
{props.rightBtnText}
</RightButton>
</ButtonGroup>
<DownArrow src='/Pictures/down-arrow.svg' />
</Buttons>
</Wrap>
)
}
export default Section
const Wrap = styled.div`
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
`
const ItemText = styled.div`
padding-top: 15vh;
text-align: center;
`
const ButtonGroup = styled.div`
display: flex;
margin-bottom: 30px;
#media (max-width: 786px){
flex-direction: column;
}
`
const LeftButton = styled.div`
background-color: rgba(23, 26, 32, 0.8);
height: 40px;
width: 256px;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
opacity: 0.85;
text-transform: uppercase;
font-size: 12px;
cursor: pointer;
margin: 8px;
`
const RightButton = styled(LeftButton)`
background: white;
opacity: 0.65;
color: black;
`
const DownArrow = styled.img`
margin-top: 20px;
height: 40px;
overflow-x: hidden;
animation: animateDown infinite 1.5s;
`
const Buttons = styled.div`
`
Thanks for the help.
I haven't tested this, but it looks like you didn't use the Wrap bgImg prop in the styled component. There is background-size, background-position, background-repeat, but not background-image using the prop.
Example:
background-image: ${props => props.bgImg || ''};
https://styled-components.com/docs/basics#passed-props
I am new to React and did not find any solution to this simple problem.
I want to revert LangText colors when the toggle button is clicked - initially ENG is white and EST is black and every time input is clicked the colors invert.
I have separate files for returning and styling components.
I tried to change the color of a variable (located on top of the style-components file) inside the styled component tag, so with CSS - inside Input pseudo-class &:checked + span. Looked surreal and didn't work in any way.
I would be very thankful for an example of how to change two colors at the same, time in this case. There are always too few examples with components, usually, CSS is used separately, but for me this method is more readable and logical.
import React from 'react'
import { Input, InputWrapper, Slider, ToggleContainer, LangText} from './LangugageToggleElements';
const LanguageToggle = ({onChange}) => {
return(
<ToggleContainer>
<InputWrapper>
<Input type="checkbox" onChange={onChange}/>
<Slider>
<LangText>ENG</LangText>
<LangText>EST</LangText>
</Slider>
</InputWrapper>
</ToggleContainer>
)} ;
export default LanguageToggle
import styled from "styled-components";
let toggleBackground = "#000";
let textColor = "#fff";
export const ToggleContainer = styled.div`
position: absolute;
top: 10px;
right: 20px;
`
export const InputWrapper = styled.label`
position: relative;
display: flex;
justify-content: center;
text-align: center;
`
export const Input = styled.input`
position: absolute;
left: -9999px;
top: -9999px;
&:checked + span {
&:before {
left: 52px;
}
}
`
export const Slider = styled.span`
display: flex;
justify-content: center;
text-align: center;
cursor: pointer;
width: 105px;
border-radius: 100px;
position: relative;
transition: background-color 0.2s;
color: ${textColor};
&:before {
content: "";
position: absolute;
top: 15px;
left: 2px;
width: 50px;
height: 20px;
border-radius: 45px;
transition: 0.2s;
background: ${toggleBackground};
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
}
`;
export const LangText = styled.p`
padding-right: 5px;
padding-left: 5px;
z-index: 1;
letter-spacing: 3px;
`;
I think you can simply use a useState hook to maintain checkbox and the use it for your LangText.
<ToggleContainer>
<InputWrapper>
<Input type="checkbox" onChange={()=>{
onChange();
//use state hook to maitain the checkbox value
}}/>
<Slider>
<LangText className={isChecboxValue === x ? color : invert }>ENG</LangText>
<LangText className={isChecboxValue === y ? invert: color}>EST</LangText>
</Slider>
</InputWrapper>
</ToggleContainer>
Styled components cause build crash
Guys, I have a problem with styled components ;/.
I'm using create-react-app and everything works fine until I "npm run build" and deploy the app on my FTP.
I keep getting this weird error and have not found any solution online. My code is attached below. Should be plain and simple.
Any ideas?
import styled from 'styled-components';
import countriesJSON from './countries.json';
const Container = styled.div`
max-width: 1200px;
margin: 0 auto;
`;
const Wrapper = styled.div`
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
`;
const Button = styled.button`
background: whitesmoke;
border-radius: 3px;
height: 5vh;
width: 20vw;
border: 2px solid orange;
color: 'slategrey';
margin: 0 1em;
padding: 0.25em 1em;
&:hover {
background: whitesmoke;
transform: scale(1.2);
`;
const Text = styled.h1`
font-size: calc(2vw + 10px);
font-weight: bold;
text-align: center;
color: whitesmoke;
`;
const Paragraph = styled.p`
color: whitesmoke;
font-size: calc(1vw + 10px);
`;
const CountryWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
#media (min-width: 600px) {
flex-direction: row;
}
`;
const CountryDetailsWrapper = styled.div`
margin: 10px;
text-align: center;
`;
const CountryImgWrapper = styled.div`
img {
height: 40vh;
margin: 0 auto;
width: 90vw;
padding: 10px;
}
#media (min-width: 596px) {
img {
width: 30vw;
height: 30vh;
}
}
`;
class Homepage extends Component {
constructor(props) {
super(props);
this.state = {
randomCountry: '',
isCountryWrapperVisible: false,
countryFlag: '',
countryRegion: '',
countryCurrency: '',
countryCapital: '',
countryPopulation: '',
countryTimezone: ''
}};
generateRandomCity = () => {
let num = Math.floor(Math.random() * countriesJSON.length);
this.setState({
randomCountry: countriesJSON[num].name
});
};
componentDidUpdate() {
this.fetchCountryInfo();
}
fetchCountryInfo = () => {
fetch(`https://restcountries.eu/rest/v2/name/${this.state.randomCountry}`)
.then(res => res.json())
.then(response =>
this.setState({
countryFlag: response[0].flag,
countryCapital: response[0].capital,
countryRegion: response[0].region,
countryCurrency: response[0].currency,
countryPopulation: response[0].population,
isCountryWrapperVisible: true
})
);
};
render() {
return (
<Container>
<Wrapper>
<Text> Test Your Knowledge of Flags </Text>
<Button onClick={this.generateRandomCity}> HIT ME! </Button>
{this.state.isCountryWrapperVisible && (
<CountryWrapper>
<CountryImgWrapper>
<img src={this.state.countryFlag} alt='flag' className='img-fluid'/>
</CountryImgWrapper>
<CountryDetailsWrapper>
<Paragraph> Name: {this.state.randomCountry} </Paragraph>
<Paragraph> Capital: {this.state.countryCapital} </Paragraph>
<Paragraph> Region: {this.state.countryRegion} </Paragraph>
<Paragraph> Population: {this.state.countryPopulation} </Paragraph>
</CountryDetailsWrapper>
</CountryWrapper>
) }
</Wrapper>
</Container>
)
}
}
export default Homepage;```
It turns out the problem lied in global-style object within parent component I had to recode.