My scroll-react links aren't working on my react webpage

My scroll-react links aren't working on my react webpage - javascript

I'm setting scrolls with react-scroll but it isn't working for some reason. I checked the documentation but I can't see why this isn't working.
Here is my component where I'm setting the links:
import React from 'react';
import classes from './Footer.css';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { Link } from 'react-scroll';
import {
faFacebook,
faTwitter,
faInstagram,
} from '#fortawesome/free-brands-svg-icons';
const footer = (props) => (
<footer className={classes.Footer}>
<ul className={classes.FooterLinks}>
<li>
<Link
to="navigation-bar"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
home
</Link>
</li>
<li>
<Link
to="about"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
about
</Link>
</li>
<li>
<Link
to="products"
smooth={true}
duration={1000}
className={classes.FooterLink}
>
products
</Link>
</li>
</ul>
<ul className={classes.FooterIcons}>
<li>
<a
href="https://www.facebook.com/"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faFacebook} />
</a>
</li>
<li>
<a
href="https://www.twitter.com"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faTwitter} />
</a>
</li>
<li>
<a
href="https://instagram.com"
// target="_blank"
className={classes.FooterIcon}
>
<FontAwesomeIcon icon={faInstagram} />
</a>
</li>
</ul>
<p className={classes.Copyright}>
copyright © carlos suarez. all rights reserved
</p>
</footer>
);
Here is an example of the components and how Im setting Id:
import React from 'react';
import classes from './NavBar.css';
import NavbarMenuBurger from './NavbarMenuBurger/NavbarMenuBurger';
import NavbarCartIcon from './NavbarCartIcon/NavbarCartIcon';
const navBar = (props) => {
return (
<nav className={classes.Navbar} id="navigation-bar">
<NavbarMenuBurger clicked={props.menuDrawerShowToTrue} />
<h1 className={classes.HeaderTitle}>RAINBOW SODAS UK</h1>
<NavbarCartIcon clicked={props.drawerShowToTrue} />
</nav>
);
};
export default navBar;
All the other components are set similarly.
Unfortunately, something isn't right and I can't figure out what this could be. I checked the DOM after the page is rendered and notice that the tags are not showing the href property. Is this normal when using scroll-react?

It turns out I had a setting in my CSS that didn't allow scroll.
body,
html {
font-family: 'Roboto', sans-serif;
background: #fff;
color: rgb(41, 41, 41);
line-height: 1.5;
font-size: 0.875rem;
/* width: 100%;
height: 100%; */
overflow-x: hidden;
scroll-behavior: smooth;
}

Related

Active Sidebar in React js

import React from "react";
import "./sidebar.css";
import { Link, NavLink } from "react-router-dom";
import { MdDashboard } from "react-icons/md";
import {
FaUserAlt,
FaListAlt,
} from "react-icons/fa";
const Sidebar = () => {
return (
<section className="component-sidebar">
<div className="component-sidebar-nav">
<ul>
<li>
<Link to="/">
<div className="component-sidebar-nav-icon">
<MdDashboard />
</div>
<div>Dashboard</div>
</Link>
</li>
<li>
<Link to="/my-profile">
<div className="component-sidebar-nav-icon">
<FaUserAlt />
</div>
<div>Profile</div>
</Link>
</li>
<li>
<Link to="/my-courses">
<div className="component-sidebar-nav-icon">
<FaListAlt />
</div>
<div>My Courses</div>
</Link>
</li>
</ul>
</div>
</section>
);
}
export default Sidebar;
I want to make active side bar, but didn't find any solution. I don't want to use NavLink.I want to make it custom in React js.
If anyone help me. I really appreciate it. Looking for a solution.
Thanks in Advance.

React Responsive Navbar and Slider Menu - issue with translateX

I'm trying to create a responsive navbar with a slider menu. I got everything working the way I want it to except for when maximizing the window (after closing the slide menu).
menu slider //
Regular Responsive Nav {maximized window result after leaving menu slider open } //
Responsive Nav {maximized window result after menu slider closed
import "./App.css";
import React, { useState } from "react";
import { IconContext } from "react-icons";
import { GiHamburgerMenu } from "react-icons/gi";
import ProfileButtons from "./components/ProfileButtons";
function App() {
let [isMenuOpen, setIsMenuOpen] = useState(false);
let [menu, setMenu] = useState("translateX(0%)");
function openMenu() {
setIsMenuOpen(!isMenuOpen);
if (isMenuOpen === true) {
setMenu("translateX(0%)");
} else {
setMenu("translateX(-100%)");
}
}
return (
<div className='container'>
<nav className='navigation'>
<div className='navburger'>
<IconContext.Provider
value={{
color: "white",
size: "1.2em",
className: "global-class-name",
}}
>
<GiHamburgerMenu onClick={openMenu} />
</IconContext.Provider>
</div>
<div className='brand'>
<h2>Chubbini</h2>
</div>
<ul className='nav-links' style={{ transform: menu }}>
<li>
<a href='/a'>About</a>
</li>
<li>
<a href='/a'>Product</a>
</li>
<li>
<a href='/a'>Inquiries</a>
</li>
<li>
<a href='/a'>FAQ</a>
</li>
<ProfileButtons />
</ul>
</nav>
</div>
);
}
export default App;
I understand the problem, it's just I'm not sure how to reach my conclusion...unless there's an easier way or I have to not useState...
Thanks for helping!

I'm trying to close the offcanvas menu in React Bootstrap when I click a link

I'm using a combination of React Bootstrap and React, to make a single page application, I've tried a few methods to get the Offcanvas menu to close when I click a link. I tried making an inline script on the link that toggles the menu, but what I found is the menu closes as I want it to but then the link only takes me halfway to where it should navigate to.
this is my code so far:
import React from "react";
import { Navbar, Nav, Container, Offcanvas } from "react-bootstrap";
import { StaticImage } from "gatsby-plugin-image";
import styled from "styled-components";
import { Link } from "gatsby";
const Wrapper = styled.div`
background-color: #9ac2ba;
.Nav-Brand {
display: flex;
}
.navbar {
background-color: #9ac2ba;
}
`;
const LinkWrapper = styled.div`
margin-top: 20px;
font-size: 1.5rem;
text-align: center;
color: #333;
.nav-link {
color: #333;
}
.nav-link:hover {
color: #000;
}
`;
const Navigation = () => {
return (
<Wrapper>
<Navbar
as="nav"
variant="light"
fixed="top"
expand={false}
className="shadow"
>
<Container>
<Navbar.Brand href="/" className="Nav-Brand">
<StaticImage
src="../images/Spf-Brand-01.jpg"
alt="Brand Image"
layout="constrained"
placeholder="blurred"
height={50}
loading="eager"
/>
<h1 className="visually-hidden">
SPF Paint & Decorating, Birmingham
</h1>
</Navbar.Brand>
<Navbar.Toggle
aria-controls="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
/>
<Navbar.Offcanvas id="offcanvasNavbar" placement="start">
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
<span className="visually-hidden">SPF Nav Menu</span>
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<StaticImage
src="../images/Spf-Brand-01.jpg"
alt="Brand Image"
layout="constrained"
placeholder="blurred"
height={50}
loading="eager"
className="offcanvas-brand"
/>
<LinkWrapper>
<Link to="/" className="nav-link">
Home
</Link>
<Link to="/#services" className="nav-link">
Services
</Link>
<Link to="/#faq" className="nav-link">
FAQ
</Link>
<Link to="/#contact" className="nav-link">
Contact
</Link>
</LinkWrapper>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
</Wrapper>
);
};
export default Navigation;
this is the build of the site: https://pland.netlify.app/

All your links are to content on the same page, so using Link isn't necessary. Instead, replace these with regular anchor tags <a href=''>Link</a>
Secondly, the default behaviour of Offcanvas is that when the overlay is closed the focus is returned to where it was when the overlay was opened. That's why the page isn't scrolling to the correct position when the overlay is closed. To change this, you can pass in restoreFocus={false} prop to Offcanvas. See Offcanvas API docs.
Thirdly, to get the menu to close when a link is clicked, you should track whether the menu is open in state and add a toggle function to the onClick prop of each link, as well as the Navbar.Toggle.
const Navigation = () => {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => {
setMenuOpen(!menuOpen)
}
const handleClose = () => setMenuOpen(false)
return(
/** Omit code */
<Navbar.Toggle
aria-controls='offcanvasNavbar'
aria-labelledby='offcanvasNavbarLabel'
/** Add onClick toggle here */
onClick={toggleMenu}
/>
<Navbar.Offcanvas
id='offcanvasNavbar'
placement='start'
/** Add these props */
restoreFocus={false}
show={menuOpen}
onHide={handleClose}
>
/** omit code */
<Nav className='justify-content-end flex-grow-1 pe-3'>
<a href='#services' className='nav-link' onClick={toggleMenu}>
Services
</a>
<a href='#faq' className='nav-link' onClick={toggleMenu}>
FAQ
</a>
{/** more links */}
</Nav>
/** omit code */
)
}

There is an option in the docs to automatically close: collapseOnSelect
https://react-bootstrap.netlify.app/components/navbar/#navbar-props
<Navbar
collapseOnSelect
as="nav"
variant="light"
fixed="top"
expand={false}
className="shadow"
>

How to make Boostrap Navbar elements inline?

I actually don't know whats wrong here is it some bootstrap error in the code do i have the wrong version or something?
I think align-items-center should do it i don't know why it doesn't. And please don't tell me to make the elements display:inline or inline-block, it does not work.
Here is the code:
import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "../logo.svg";
import styled from "styled-components";
import { ButtonContainer } from "./Button";
export class Navbar extends Component {
render() {
return (
<NavWrapper className="navbar navbar-dark ">
<Link to="/">
<img src={logo} alt="store" className="navbar-brand " />
</Link>
<ul className="navbar-nav align-items-center">
<li className="nav-item ">
<Link to="/" className="nav-link">
products
</Link>
</li>
</ul>
<Link to="/cart" className="ml-auto">
<ButtonContainer>
<span className="mr-2">
<i className="fas fa-cart-plus" />
</span>
my cart
</ButtonContainer>
</Link>
</NavWrapper>
);
}
}
const NavWrapper = styled.nav`
background: var(--mainBlue);
.nav-link {
color: var(--mainWhite);
fontsize: 1.3rem;
text-transform: capitalize;
}
`;
export default Navbar;

I am sorry for taking your time, i just reinstalled bootstrap and it works...

react js onClick toggle class on different elements inside different components

i am fairly new to react and i am building an app that has 2 languages. you can switch between the languages from the navbar using Redux to handle the state. i have a json file where i stored the text for both languages and used onClick to switch between them. it works great on every component and every page.
however my problem is on some components where i am using map() and find() functions to get data from a different json file so i feel like i am forced to find another solution to switch languagse on these components and the simplest solution i could think of is to hide/show a class between two h1 for example one for english and one for arabic.
how can i make an onClick function on the navbar button that will change the language and also show/hide a class on other components not a child component in order to show one of the two languages?
this is the Navbar.js
import React, { Component } from 'react';
import { bubble as Menu } from 'react-burger-menu'
import { NavLink } from 'react-router-dom'
import './Navbar.css';
import '../../../data/content.json'
const Provider = require('react-redux').Provider;
const createStore = require('redux').createStore;
const content = require('../../../reducer');
class Navbar extends Component {
showSettings (event) {
event.preventDefault();
}
render() {
const data = this.props.data;
let switchLanguage = this.props.switchLanguage;
return (
<div>
<ul className="right hide-on-med-and-down language">
<li className="dropdown-button right"><a onClick={switchLanguage.bind(this,'en')} className="language-a">Eng</a></li>
<li className="dropdown-button right"><a onClick={switchLanguage.bind(this,'ar')} className="language-a">عربي</a></li>
<li className="right">
<p>CALL US: +905061162526</p>
</li>
</ul>
<i onClick={ this.showSettings } className="material-icons sidenav-trigger right">menu</i>
<Menu >
<img className="sidenav-logo" src="https://res.cloudinary.com/dd5e5iszi/image/upload/v1522222933/other/home-page-logo.png" alt="cayan group logo"/>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/">{data.home}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/projects">{data.projects}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/services">{data.services}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/about">{data.about}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/contact">{data.contact}</NavLink>
</li>
</Menu>
<div className="navbar-fixed">
<nav className="normal-nav">
<div className="nav-wrapper">
<img className="responsive-img" src="https://res.cloudinary.com/dd5e5iszi/image/upload/v1522221061/other/logo-nav.png" alt="cayan group logo"/>
<ul className="nav-links center hide-on-med-and-down">
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" exact to="/">{data.home}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/projects">{data.projects}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/services">{data.services}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/about">{data.about}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/contact">{data.contact}</NavLink>
</li>
</ul>
</div>
</nav>
</div>
</div>
);
}
}
export default Navbar;
this is the where i want to hide/show a class. on some tags in want to show and hide one of them based on the language selected
import React, { Component } from 'react';
import Slider from 'react-slick';
import PRODUCTS from '../../Data/CarouselData.js';
import './ProjectsCarousel.css';
class ProjectsCarousel extends Component {
render() {
const data = this.props.data;
var settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
adaptiveHeight: true,
autoplay: false,
autoplaySpeed: 5000,
responsive:[
{ breakpoint: 400, settings: { slidesToShow: 1 } },
{ breakpoint: 1024, settings: { slidesToShow: 2 } }
]
};
return (
<div className="projetcsCarousel ">
<div className="containermy">
<div className="row">
<div className="container">
<h1 className="body-h1">PROJECTS</h1>
</div>
<div className="carousel">
<div className="left-btn col s1">
<p>PREV</p>
</div>
<Slider className="inner col s10" {...settings}>
{PRODUCTS.map((product)=>{
return (
<a key={product.id} href={'/products/'+product.id}>
<div className='wrapper'>
<div className={'carouselImages cayan-'+product.id}>
<h6>{'CAYAN'+product.id}</h6>
</div>
<div className="description">
<h6>Description</h6>
<h5>{product.priceMin + ' - ' + product.priceMax}</h5>
<p>{product.description}</p>
<p>{product.descriptionAr}</p>
</div>
<div className="project-info ">
<div className="col s6 project-info-icons left">
<i className="ion-ios-location-outline "></i>
<p>{product.location}</p>
<p>{product.locationAr}</p>
<br/>
<i className="ion-ios-home-outline"></i>
<p>{product.types}</p>
<br/>
<i className="ion-ios-photos-outline"></i>
<p>{product.area}</p>
<br/>
</div>
<div className="col s6 project-info-icons right">
<i className="ion-ios-pricetag-outline "></i>
<p>{product.installment} months installments</p>
<br/>
<i className="ion-ios-gear-outline"></i>
<p>{product.status}</p>
<br/>
<i className="ion-ios-cart-outline"></i>
<p>{product.deliveryDate}</p>
<br/>
</div>
<button className="more-details">MORE DETAILS</button>
</div>
</div>
</a>
)
})}
</Slider>
<div className="right-btn col s1">
<p>NEXT</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default ProjectsCarousel;

This might resolve issue with multiple element class toggling.try this out:
https://jsfiddle.net/menomanabdulla/todu7m6g/11/
class ToggoleApp extends React.Component {
constructor(props) {
super(props)
this.state = {
}
this.toggleClass=this.toggleClass.bind(this);
}
toggleClass(e){
let classes = 'my-class';
let els = document.getElementsByClassName('my-class active');
if(els){
while (els[0]) {
els[0].classList.remove('active')
}
}
e.target.className = classes.replace('my-class','my-class active');
}
render() {
return (
<div>
<h2>Toggle Example</h2>
<ul>
<li className="my-class active" onClick={(e) =>this.toggleClass(e)}>
One
</li>
<li className="my-class" onClick={(e) =>this.toggleClass(e)}>
Two
</li>
<li className="my-class" onClick={(e) =>this.toggleClass(e)}>
Three
</li>
</ul>
</div>
)
}
}
ReactDOM.render(<ToggoleApp />, document.querySelector("#app"))
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.my-class{
color: #FF3355;
}
.my-class.active{
color: #33FF46;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

From what I understand from after reading the question is you have to toggle between the elements on click by changing the class.
The solution I propose is change a single variable value onClick and use the variable to show and hide for example:
let isEnglish = true;
<h1 style={ display: isEnglish ? block : hidden }>{'Welcome'}</h1>
<h1 style={ display: isEnglish ? none : block }>{'Welcome in Arabic'}</h1>

Develop Reference

JavaScript is the programming language of the Web.

My scroll-react links aren't working on my react webpage - javascript

It turns out I had a setting in my CSS that didn't allow scroll. body, html { font-family: 'Roboto', sans-serif; background: #fff; color: rgb(41, 41, 41); line-height: 1.5; font-size: 0.875rem; /* width: 100%; height: 100%; */ overflow-x: hidden; scroll-behavior: smooth; }

Related

Active Sidebar in React js

React Responsive Navbar and Slider Menu - issue with translateX

I'm trying to close the offcanvas menu in React Bootstrap when I click a link

How to make Boostrap Navbar elements inline?

react js onClick toggle class on different elements inside different components

Categories

Resources