We Keep Coding

(React) I have two buttons on my main page but can only style one

I have two buttons on my main pages.
Button one is for scrolling to elements on the main page.
Button two is for linking to other pages on my website.
Button 1 is from react-scroll while Button 2 is from react-router-dom
Currently button 1 scrolls properly and displays styling correctly.
However button 2 links to other pages but does not display any styling and displays the property of "navToPage" rather than the value of "buttonLabel".
How can I correct this so that both buttons have styling and fuctionality?
Here is the code from Data.js that feeds into index.js
export const homeObjOne = {
id: "about",
lightBg: false,
lightText: true,
lightTextDesc: true,
topLine: "Freeman Ltd",
headline: "Professional & Affordable Services",
description:
"We enjoy helping our clients by utilizing over 20 years of experience.",
buttonLabel: "Get started",
imgStart: false,
img: require("../../images/scales.jpg"),
alt: "North West",
dark: true,
primary: true,
darkText: false,
navToPage: "services",
};
export const homeObjTwo = {
id: "services",
lightBg: true,
lightText: false,
lightTextDesc: false,
topLine: "FAQ",
headline: "We are here to help!",
description:
"Have Questions? We have answers.",
buttonLabel: "Learn More!",
imgStart: true,
img: require("../../images/faq.jpg"),
alt: "FAQ",
dark: false,
primary: false,
darkText: true,
navToPage: "/faq",
};
Here is index.js
import React from "react";
import { Button } from "../ButtonElements";
import { PageButton } from "../ButtonPageElements";
import { Link } from "react-router-dom";
import {
InfoContainer,
InfoWrapper,
InfoRow,
Column1,
Column2,
TextWrapper,
TopLine,
Heading,
Subtitle,
BtnWrap,
ImgWrap,
Img,
} from "./infoElements";
const InfoSection = ({
lightBg,
id,
imgStart,
topLine,
lightText,
headline,
darkText,
description,
buttonLabel,
img,
alt,
primary,
dark,
dark2,
navToPage,
}) => {
return (
<>
<InfoContainer lightBg={lightBg} id={id}>
<InfoWrapper>
<InfoRow imgStart={imgStart}>
<Column1>
<TextWrapper>
<TopLine>{topLine}</TopLine>
<Heading lightText={lightText}>{headline}</Heading>
<Subtitle darkText={darkText}>{description}</Subtitle>
<BtnWrap>
{navToPage && navToPage.startsWith("/") ? (
//if it is linked to another page use router link
<Link to={navToPage} style={{}}>
{navToPage}
</Link>
) : (
//else use the smart link component
<Button
to={navToPage}
smooth={true}
duration={500}
spy={true}
exact="true"
offset={-80}
primary={primary ? 1 : 0}
dark={dark ? 1 : 0}
dark2={dark2 ? 1 : 0}
>
{buttonLabel}
</Button>
)}
</BtnWrap>
</TextWrapper>
</Column1>
<Column2>
<ImgWrap>
<Img src={img} alt={alt} />
</ImgWrap>
</Column2>
</InfoRow>
</InfoWrapper>
</InfoContainer>
</>
);
};
export default InfoSection;
Here is the code for ButtonElements.js
import styled from "styled-components";
import { Link } from "react-scroll";
export const Button = styled(Link)`
border-radius: 50px;
background: ${({ primary }) => (primary ? "#ca1f27" : "#010606")};
white-space: nowrap;
padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
color: ${({ dark }) => (dark ? "#010606" : "#fff")};
font-size: ${({ fontBig }) => (fontBig ? "20px" : "16px")};
outline: none;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
&:hover {
transition: all 0.2s ease-in-out;
background: ${({ primary }) => (primary ? "#fff" : "#ca1f27")};
}
`;
Here is the code for ButtonPageElements.js
import styled from "styled-components";
import { Link } from "react-router-dom";
export const PageButton = styled(Link)`
border-radius: 50px;
background: ${({ primary }) => (primary ? "#ca1f27" : "#010606")};
white-space: nowrap;
padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
color: ${({ dark }) => (dark ? "#010606" : "#fff")};
font-size: ${({ fontBig }) => (fontBig ? "20px" : "16px")};
outline: none;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
&:hover {
transition: all 0.2s ease-in-out;
background: ${({ primary }) => (primary ? "#fff" : "#ca1f27")};
}
`;

Mapping a component to react-spring-3d-carousel?

Does anyone know how to map a function to react-spring-3d-carousel? This is the code I have but nothing seems to be working. My data structure for portfolioItems is fine and ImageMedia renders one card only instead of mapping each card to its respective place.
It seems I am only able to render one car successfully, but not sure what's wrong here. Maybe if someone can look at the mapping function they'll be able to see where I'm screwing up.
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Carousel from "react-spring-3d-carousel";
import { config } from "react-spring";
function Rotate(props) {
const table = props.cards.map((element, index) => {
return { ...element, onClick: () => setGoToSlide(index) };
});
const [offsetRadius, setOffsetRadius] = useState(0);
const [showArrows, setShowArrows] = useState(false);
const [goToSlide, setGoToSlide] = useState(null);
const [cards] = useState(table);
useEffect(() => {
setOffsetRadius(props.offset);
setShowArrows(props.showArrows);
}, [props.offset, props.showArrows]);
return (
<CarouselWrapper>
<Carousel
slides={cards}
currentSlide={goToSlide}
offsetRadius={offsetRadius}
showNavigation={showArrows}
animationConfig={config.gentle}
/>
</CarouselWrapper>
);
}
export default Rotate;
const CarouselWrapper = styled.div`
width: (${(props) => props.width});
height: (${(props) => props.height});
margin: (${(props) => props.margin});
`;
import React from "react";
import styled from "styled-components";
import Rotate from "./props/Rotate";
import portfolioItems from "./data/portfolioItems";
import ImageMediaCard from "./ImageMediaCard";
import { v4 as uuidv4 } from "uuid";
function Portfolio() {
let cards = [
{
key: uuidv4(),
content: <ImageMediaCard alt="1" />,
},
{
key: uuidv4(),
content: <ImageMediaCard alt="2" />,
},
{
key: uuidv4(),
content: <ImageMediaCard alt="3" />,
},
{
key: uuidv4(),
content: <ImageMediaCard alt="4" />,
},
];
return (
<PortfolioWrapper id="portfolio">
<PortfolioHeading>Portfolio</PortfolioHeading>
<Rotate
cards={
{key: uuidv(),
content: {portfolioItems.map((portfolioItem) => (
<ImageMediaCard
key={portfolioItem.id}
image={portfolioItem.image}
alt={portfolioItem.alt}
title={portfolioItem.title}
description={portfolioItem.description}
website={portfolioItem.website}
source={portfolioItem.source}
/>
))}}}
height="500px"
width="80%"
margin="10px"
offset={2}
showArrows={false}
/>
</PortfolioWrapper>
);
}
export default Portfolio;
const PortfolioWrapper = styled.div`
max-width: 100vw;
padding-bottom: 120px;
background-color: lightgreen;
height: 900px;
#media (max-width: 768px) {
display: block;
display: inline-block;
}
`;
const PortfolioHeading = styled.h2`
font-size: 60px;
display: flex;
justify-content: center;
`;
const RowWrap = styled.div`
padding-top: 20px;
`;
const Row = styled.div`
display: flex;
justify-content: space-around;
padding-bottom: 30px;
margin-left: 30px;
margin-right: 30px;
#media (max-width: 768px) {
flex-direction: column;
}
`;
const Cards = styled(Card)`
/* display: flex; */
/* justify-content: space-around; */
`;
Any help would be greatly appreciated!

How to redefine a style .tippy-tooltip in "react-tippy"

I want to use "react-tippy" for my project.
How can I override the styles .tippy-tooltip?
Me need to remove padding inside the tooltip.

Here is the Tool tip component I created for my use using react tippy and styled components. You can figure out from there how to customize it to your needs:
Tooltip.js
import React from 'react';
import 'tippy.js/dist/tippy.css';
import { TooltipText, StyledTippy } from './Tooltip.styled';
const Tooltip = ({ moveDown, moveRight, content, ...props }) => (
<StyledTippy
moveDown={moveDown}
moveRight={moveRight}
content={
<TooltipText small bold>
{content}
</TooltipText>
}
placement="bottom"
{...props}
>
{props.children}
</StyledTippy>
);
export default Tooltip;
Tooltip.styled.js
import styled from 'styled-components';
import Tippy from '#tippyjs/react';
export const TooltipText = styled.p`
font-weight: 500;
font-size: 10px;
line-height: 12px;
color: ${({ theme }) => theme.colors.tooltips.simpleText};
`;
export const StyledTippy = styled(Tippy)`
z-index: 5000;
margin-top: ${({ moveDown }) => (moveDown ? `${moveDown}px` : '0')};
margin-left: ${({ moveRight }) => (moveRight ? `${moveRight}px` : '0')};
background: ${({ theme }) => theme.colors.tooltips.simpleBackground};
height: 24px;
width: 110px;
display: flex;
align-items: center;
justify-content: center;
.tippy-arrow {
color: ${({ theme }) => theme.colors.tooltips.simpleBackground};
}
`;

Styled Components - Conditionally render an entire css block based on props

I understand that styles can be conditionally rendered such as:
const HelloWorldLabel= styled("div")<{ centered?: boolean }>`
display: ${({ centered }) => (centered ? "block" : "flex")};;
margin: ${({ centered }) => (centered ? "auto 0" : "unset")};
padding: ${({ centered }) => (centered ? "0 15px" : "unset")};
`;
This does not look DRY - How can I (is it possible) render an entire block of css styles based on props?
Something like:
const HelloWorldLabel= styled("div")<{ centered?: boolean }>`
if (centered) {
display: "block" ;
margin: $"auto 0";
padding: "0 15px" ;
} else {
......
}
`;

With styled-component, or any CSS-in-JS, you can conditionally render a css block:
import styled, { css } from 'styled-components';
const light = css`
background-color: white;
color: black;
`;
const dark = css`
background-color: black;
color: white;
`;
const Box = styled.div`
${({ isDark }) => (isDark ? light : dark)}
`;
Full Example:
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import styled, { css } from 'styled-components';
const light = css`
background-color: white;
border: 2px solid black;
color: black;
`;
const dark = css`
background-color: black;
color: white;
`;
const FlexBox = styled.div`
margin: 20px;
padding: 20px;
${({ isDark }) => (isDark ? light : dark)}
`;
const App = () => {
const [isDark, setIsDark] = useState(false);
const toggle = () => setIsDark(b => !b);
return (
<FlexBox isDark={isDark}>
<div>Some Text</div>
<button onClick={toggle}>Change Block</button>
</FlexBox>
);
};
ReactDOM.render(<App />, document.getElementById('root'));

A less verbose way that worked for me is
const SideMenu = styled.aside`
width: 200px;
${({ isHidden }) => isHidden && `
display: none;
`}
// another random prop you need here
${({ redBg }) => redBg && `
background-color: red;
`}
`;

You can use a function and return the css based on prop:
const HelloWorldLabel= styled("div")`
${({centered}) => {
if (centered) {
return `
display: "block" ;
margin: "auto 0";
padding: "0 15px";
`
} else {
return `// Other styles here`
}
}}
`;

The alternative is
let customCss = setCustomCss(position) => {
let positionCss = {
center: [ 'css: value;', 'css:value;'],
left: .....
right: ....
}
return return positionCss[position];
}
let HelloWorldLabel= styled('div')(customCss, {
/* css common to all */
})

How to display images without cropping using gatsby-image?

Live example (images might load slowly): https://suhadolnik-photo.surge.sh/portreti
I'm making a photography site with GatsbyJS and using the following template as a base site that I've been changing: https://github.com/LekoArts/gatsby-starter-portfolio-emilia
Being really new to graphql I've run into a problem displaying images after a user clicks on the card to show the 'Portraits' subpage. The images are all displayed with a fixed width and height which I don't want. I need to display them with their native width and height, just resized to fit into the grid.
I've tried changing the graphql query in the project.js file, where you set the maxWidth: 1600 to no avail, as well as the resize(width: 800) further down the query. Later I found out that changing the margin on gatsby-image-wrapper through dev tools gave me the expected results, but that required changing the core gatsby-image plugin and having to manually change the margin for every image separately which isn't the solution.
project.js
import React from 'react'
import Img from 'gatsby-image'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
import styled from 'styled-components'
import { Layout, ProjectHeader, ProjectPagination, SEO } from '../components'
import config from '../../config/site'
const BG = styled.div`
background-color: ${props => props.theme.colors.bg};
position: relative;
padding: 2rem 0 0 0;
`
const OuterWrapper = styled.div`
padding: 0 ${props => props.theme.contentPadding};
margin: -10rem auto 0 auto;
`
const InnerWrapper = styled.div`
position: relative;
max-width: ${props => `${props.theme.maxWidths.project}px`};
margin: 0 auto;
`
const Grid = styled.div`
display: grid;
grid-template-columns: repeat(${props => props.theme.gridColumnsProject}, 1fr);
grid-gap: 20px;
#media (max-width: 768px) {
grid-template-columns: 1fr;
}
`
const Project = ({ pageContext: { slug, prev, next }, data: { project: postNode, images } }) => {
const project = postNode.frontmatter
return (
<Layout customSEO>
<SEO postPath={slug} postNode={postNode} postSEO />
<ProjectHeader
name={config.name}
date={project.date}
title={project.title}
areas={project.areas}
text={postNode.body}
/>
<BG>
<OuterWrapper>
<InnerWrapper>
<Grid>
{images.nodes.map(image => (
<Img
alt={image.name}
key={image.childImageSharp.fluid.src}
fluid={image.childImageSharp.fluid}
style={{ margin: '2rem 0' }}
/>
))}
</Grid>
</InnerWrapper>
<ProjectPagination next={next} prev={prev} />
</OuterWrapper>
</BG>
</Layout>
)
}
export default Project
Project.propTypes = {
pageContext: PropTypes.shape({
slug: PropTypes.string.isRequired,
next: PropTypes.object,
prev: PropTypes.object,
}),
data: PropTypes.shape({
project: PropTypes.object.isRequired,
images: PropTypes.object.isRequired,
}).isRequired,
}
Project.defaultProps = {
pageContext: PropTypes.shape({
next: null,
prev: null,
}),
}
export const pageQuery = graphql`
query($slug: String!, $absolutePathRegex: String!) {
images: allFile(
filter: {
absolutePath: { regex: $absolutePathRegex }
extension: { regex: "/(jpg)|(png)|(tif)|(tiff)|(webp)|(jpeg)/" }
}
sort: { fields: name, order: ASC }
) {
nodes {
name
childImageSharp {
fluid(maxWidth: 1600, quality: 90) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
project: mdx(fields: { slug: { eq: $slug } }) {
body
excerpt
parent {
... on File {
mtime
birthtime
}
}
frontmatter {
cover {
childImageSharp {
resize(width: 800) {
src
}
}
}
date(formatString: "DD.MM.YYYY")
title
areas
}
}
}
`
Card.js the parent component:
import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import { useSpring, animated, config } from 'react-spring'
import { rgba } from 'polished'
import Img from 'gatsby-image'
import { Link } from 'gatsby'
const CardItem = styled(Link)`
min-height: 500px;
position: relative;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
justify-content: flex-end;
color: ${props => props.theme.colors.color};
transition: all 0.3s ease-in-out;
&:hover {
color: white;
transform: translateY(-6px);
}
#media (max-width: ${props => props.theme.breakpoints.s}) {
min-height: 300px;
}
`
const Cover = styled.div`
width: 100%;
height: 100%;
position: absolute;
`
const Content = styled.div`
padding: 1rem;
position: relative;
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
opacity: 0;
background: ${props => rgba(props.theme.colors.link, 0.65)};
height: 0;
${CardItem}:hover & {
opacity: 1;
height: 120px;
}
`
const Bottom = styled.div`
margin-top: 0.5rem;
display: flex;
align-items: center;
font-size: 0.85rem;
div:first-child {
margin-right: 1rem;
}
`
const Name = styled.h2`
margin-bottom: 0;
margin-top: 0;
`
const Card = ({ path, cover, date, areas, title, delay }) => {
const springProps = useSpring({
config: config.slow,
delay: 200 * delay,
from: { opacity: 0, transform: 'translate3d(0, 30px, 0)' },
to: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
})
return (
<animated.div style={springProps}>
<CardItem to={path}>
<Cover>
<Img fluid={cover} />
</Cover>
<Content>
<Name>{title}</Name>
<Bottom>
<div>{date}</div>
<div>
{areas.map((area, index) => (
<React.Fragment key={area}>
{index > 0 && ', '}
{area}
</React.Fragment>
))}
</div>
</Bottom>
</Content>
</CardItem>
</animated.div>
)
}
export default Card
Card.propTypes = {
path: PropTypes.string.isRequired,
cover: PropTypes.object.isRequired,
date: PropTypes.string.isRequired,
areas: PropTypes.array.isRequired,
title: PropTypes.string.isRequired,
delay: PropTypes.number.isRequired,
}
I expect the images to show in their native width and height, but resized to fit the grid. Providing visual representation below on how it looks now and what the expected result is.
Current result and expected result
Cheers!

Remove height:100% and position:absolute from your cover component on the homepage.
const Cover = styled.div`
width: 100%;
`
Also, in case you weren't aware, you can pass style and imgStyle props to Gatsby image to change it's css.
| style | object | Spread into the default styles of the wrapper element |
| imgStyle | object | Spread into the default styles of the actual img element |
| placeholderStyle | object | Spread into the default styles of the placeholder img element |
So in your project template you can change the object fit style like this:
<Img
alt={image.name}
key={image.childImageSharp.fluid.src}
fluid={image.childImageSharp.fluid}
imgStyle={{ objectFit: 'contain' }}
/>