Here is the header section of my website-to-be.
Primary goal:
To hover over an icon and change the Logo text in the top right to reflect the icon which is being hovered over. For example, hovering over the second icon </> will change 'edwindharris' to 'projects'. The default needs to be 'edwindharris'.
Secondary goal:
For the transition between the changing headings to be a quick (.2s ish) fade.
Here is the incomplete code I have so far, which I would greatly appreciate help in completing:
const HeaderDesktop = () => {
const homeHeading = {
default:'edwin' + '<em>d</em>' + 'harris',
home: 'home',
projects: 'projects',
design: 'design',
about: 'about'
}
const Logo = () => {
return (
<LogoContainer>
<span dangerouslySetInnerHTML={{__html: homeHeading.default}}/>
</LogoContainer>
);
}
return (
<DesktopHeader>
<Link to={'/'}><HomeSvg/></Link>
<Link to={'/projects'}><ProjectsSvg/></Link>
<Link to={'/design'}><DesignSvg/></Link>
<Link to={'/about'}><AboutSvg/></Link>
<Logo/>
</DesktopHeader>
);
}
export default HeaderDesktop;
I have removed attempts at implementing a fade / changing the text on hover so as to keep this post clear. Everything I have tried before posting has not been pretty!
Note: LogoContainer & DesktopHeader and the Svgs are Styled Components.
Thank you for your time.
Store heading value in a state and then update the heading with relevant value on onMouseEnter and onMouseLeave.
Example:
import {useState} from "react";
const HeaderDesktop = () => {
const defaultHeading = 'edwin' + '<em>d</em>' + 'harris'
const [heading, setHeading] = useState(defaultHeading)
const Logo = ({heading}) => {
return (
<LogoContainer>
<span dangerouslySetInnerHTML={{__html: heading}}/>
</LogoContainer>
);
}
const setDefaultPageHeading = () => setHeading(defaultHeading)
return (
<DesktopHeader>
<Link to={'/'}><HomeSvg/></Link>
<Link to={'/projects'}>
<span
onMouseEnter={()=> setHeading('projects')}
onMouseLeave={setDefaultPageHeading}
>
<ProjectsSvg/>
</span>
</Link>
<Link to={'/design'}>
<span
onMouseEnter={()=> setHeading('design')}
onMouseLeave={setDefaultPageHeading}
>
<DesignSvg/>
</span>
</Link>
<Link to={'/about'}>
<span
onMouseEnter={()=> setHeading('about')}
onMouseLeave={setDefaultPageHeading}
>
<AboutSvg/>
</span>
</Link>
<Logo heading={heading}/>
</DesktopHeader>
);
}
export default HeaderDesktop;
Related
I am trying to use Typed.js on my website, and I have been getting many errors I cant find a way to fix them.
I have looked through GitHub, and I have found the exact same problem that someone had I used that code in my document and the errors are still popping up. The errors are always Expression Expected and } expected also, Unexpected token. Did you mean {'}? Here is a picture of the errors too. Here is the errors that are resulting:
errors
import "./App.css";
import Typed from "typed.js";
import { useEffect, useRef } from "react";
function HomePage() {
return (
<>
<body>
<div class="hero">
<nav>
<h2 class="logo">JAKEISTHATMAN.</h2>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
</ul>
<button type="button">Contact</button>
</nav>
</div>
<div class="container"></div>
<div class="main-text">
<h1>
I'm a <span class="type"></span>
</h1>
<p>
Also I work for <b>#no</b> media team!
</p>
<button type="button">Contact</button>
</div>
export default function Typed() {
const TypedElement = useRef(null);
useEffect(() => {
if (!TypedElement.current) return;
const typed = new Typed(TypedElement.current, {
strings: [
"string",
"string2",
"string3",
],
startDelay: 300,
typeSpeed: 100,
backSpeed: 100,
backDelay: 500,
loop: true,
});
// Destroying
return () => {
typed.destroy();
};
}, []);
return <span ref={TypedElement}></span>
}
</body>
</>
);
}
export default HomePage;
First, if the code example above is how your code really is, it won't work because you just have javascript in an html tag all of a sudden. Try wrapping the javascript with curly brackets to let the file know you are typing javascript code now like this:
<div>
{console.log("this is javascript")}
</div>
Second, it looks like you are trying to define a functional component called Typed. At the very least, it is poor organization to define a functional component inside an html tag like you have done above (if it isn't impossible, not sure, never tried it). You should define the functional component called Typed outside the HomePage function, like so:
import "./App.css";
import Typed from "typed.js";
import { useEffect, useRef } from "react";
const Example = ({args_if_necessary}) => {
const typeTarget = useRef(null);
useEffect(() => {
const typed = new Typed(typeTarget.current, {
strings: ["<i>First</i> sentence.", `use ${args_if_necessary}`],
typeSpeed: 40,
});
return () => {
typed.destroy();
};
}, []);
return <span ref={typeTarget} />;
};
function HomePage() {
return (
<>
<body>
<your-other-html />
<Example args_if_necessary={"something"} />
</body>
</>
);
}
export default HomePage;
We are using react native for creating web UI as well. Here my requirement is to pass title attribute in <View/> or <Text/> component same as that of <div title="abc"> tag in HTML. Could someone please suggest and help me out.
<View>
<Text>ABC</Text>
<View/>
Something like this.
If it needs to be a variable (and it is called title):
<View>
<Text>{title}</Text>
<View/>
Same goes for TouchableOpacity.
What do you mean by using the title attribute for "View"?
here you can find every prop that "View" accepts.
Also, you can find out which props are going to use for the other React native Components, in the same way.
I think you want to know how to send params like the title to a component that we create on our own, like a container in our app:
// Container.js
import ...
.
.
.
const Container = (props) => {
// Destructuring the props
const {title, children} = props;
return (
<View style = {styles.container}>
<View style = {styles.header}> // header of your container
<Text>{title}</Text> // use title here
</View>
{children} // body of your container
</View>
)
}
export default Container;
const styles = StyleSheet.create({
// styles here
})
// Home.js
import ...
import Container from './Container.js'
.
.
.
const Home = (props) => {
return(
<Container title = 'Home'> // now we can send this param to our Container
// body as Container Children goes here
</Container>
)
}
I expect that the text of the p tag inside the Link to be white, but for some reason the link text won't display. It appears to be hidden and only displays once I hover over the button. When I hover it is only barely visible. Can it be due to the <Link>?
I have appended the code and a picture that shows my button below.
Any help would be greatly appreaciated :)
Index.js file
<div class="py-4">
<Button>
<div className="p-1">
<Link to="/contact">
<p>Get in contact</p>
</Link>
</div>
</Button>
</div>
Button component:
import React from 'react';
const sizes = {
default: `py-3 px-8`,
lg: `py-4 px-12`,
xl: `py-5 px-16 text-lg`
};
const Button = ({ children, className = '', size }) => {
return (
<button
type="button"
className={`
${sizes[size] || sizes.default}
${className}
bg-primary
hover:bg-primary-darker
rounded
text-white
`}>
{children}
</button>
);
};
export default Button;
picture of button, which should show get in contact
try this :
<Link to="/contact" style={{color:'#fff'}}>Get in contact </Link>
or add your own className with the color u wanna use
I have a ReactMapGL component in my page that is stored above the footer and below the navbar. In my initial screen from my desktop the layout looks fine, but when I inspect element to make the screen size smaller, the layout becomes unresponsive.
So far this is my code for this particular page:
export default function Map({posts}) {
const [viewport, setViewport] = useState({
latitude: 45.4211,
longitude: -75.6938,
width:"100vw",
height:"100vh",
zoom: 10,
});
const [selectedProperty, setSelectedProperty] = useState(null)
return (
<div>
<ReactMapGL {...viewport} mapboxApiAccessToken="//mykey"
mapStyle="mapbox://styles/jay/cks5xkaa892cp17o5hyxcuu0z"
onViewportChange={viewport => {
setViewport(viewport);
}}>
{
posts &&
posts.map((maps) => (
<Marker key={maps.id} latitude={maps.Latitude} longitude={maps.Longitude}>
<button className="marker-btn" onClick={e => {
e.preventDefault();
setSelectedProperty(maps);
}}>
<img src="placeholder.svg"/>
</button>
</Marker>
))}
{selectedProperty ? (
<Popup latitude={selectedProperty.Latitude} longitude={selectedProperty.Longitude}
onClose={() => {setSelectedProperty(null);}}>
<h1>{selectedProperty.Title}</h1>
</Popup>) : null}
</ReactMapGL>
</div>
);
}
For the Navbar and footer I have copy pasted the html and css from here.
I'm retrieving images from the database in REACT and have created a holder for an image with thumbnails at the bottom.
I would like to know how I can make the interface behave like eCom sites, whereupon clicking the thumbnail, its respective image is loaded in the bigger area.
Below is the REACT code.
import React from "react";
import { Link } from "react-router-dom";
import ImageList from "../ImageList";
const ProductDetails = props => {
const images = require.context(
"../../../strapui/app/public/uploads",
true,
/\.jpg$/
);
const keys = images.keys();
const svgsArray = keys.map(key => images(key));
return(
<div className="desContainer ">
<div className="desimgContainer ">
<ImageList
styles="heroImage"
imagePath={props.selectedItem[0].image[0]}
svgsArray={svgsArray}
/>
</div>
<div className="thumbs">
<ImageList
styles="thumbnail"
imagePath={props.selectedItem[0].image[0]}
svgsArray={svgsArray}
/>
</div>
<div className="thumbs">
<ImageList
styles="thumbnail"
imagePath={props.selectedItem[0].image[1]}
svgsArray={svgsArray}
/>
</div>
<div className="thumbs">
<ImageList
styles="thumbnail"
imagePath={props.selectedItem[0].image[2]}
svgsArray={svgsArray}
/>
</div>
</div>
);
};
export default ProductDetails;
The images are pulled from the database using the following code
import React from "react";
const ImageList = props => {
if (
props.imagePath === undefined ||
props.imagePath === null ||
props.imagePath.length === 0
)
return null;
const path = props.svgsArray.find(
str => str.indexOf(props.imagePath.hash) > 1
);
return <img src={path} alt={props.imagePath.hash} className={props.styles} />;
};
export default ImageList;
I was wondering if I could use a switch case to show the image when a thumbnail is clicked?
will it work? if it will, can you pls direct me how?
Use onClick event and attach it with some function which should do some code magic.
for e.g:
largeSizeImage () {
/* some code logic */
}
return (
<div className="thumbs" onClick={largeSizeImage()}>
<ImageList
styles="thumbnail"
imagePath={props.selectedItem[0].image[1]}
svgsArray={svgsArray}
/>
</div>
)